页面转换后动态添加元素具有双重效果 [英] Dynamic added elements double effect after page transition

问题描述

我在代码中添加了jQuery的动态功能，但是当我返回一页并返回到添加了该页面的页面时，按下它们，现在它们以某种方式点击两次。

我尝试过使用alert（'something'）;当我点击：

  $（document）.on（'click'，'#products a'，function（）{
 alert（'something'）; 
} 
  

返回到页面我已经尝试过

$ $ $ $（'＃products a'）。remove（）;

当您点击返回按钮时，因为我认为所有添加了两次的元素，但没有任何区别。 p>

我没有任何关于这些行的东西，也许我需要$（document）.ready（）;或者使用pageinit？

解决方案

这也被称为多事件触发问题，由于其架构，jQuery Mobile很常见。

<对这个问题有几种解决方案：

解决方案1 ​​

最好的解决方案是使用 pageinit 来绑定事件。如果您查看官方文档，发现 pageinit 只会触发一次，就像准备好文档一样，所以再也无法绑定事件了。这是最好的解决方案，因为您没有像使用off方法移除事件一样的处理开销。

工作jsFiddle示例： http://jsfiddle.net/Gajotres/AAFH8/

这个工作解决方案是在一个以前有问题的例子的基础。

解决方案2

在绑定它之前移除事件：

  $（document）.on（'pagebeforeshow'，'#index'，function（）{
 $（document）。 （'click'，'＃test-button'）。on（'click'，'＃test-button'，function（e）{
 alert（'点击'）; 
}） ; 
}）; 
  

工作jsFiddle示例： http://jsfiddle.net/Gajotres/K8YmG/

解决方案3

使用jQuery Filter选择器，如下所示：

  $（'＃carousel div：Event（！click） '）.each（function（）{
 //如果click没有绑定到#carousel div做某事
}）; 
  

因为事件过滤器不是官方jQuery框架的一部分，所以可以在这里找到： http://www.codenothing.com/archives/2009/event-filter/

简而言之，如果速度是您主要关心的问题，那么解决方案2 比解决方案1要好得多。

解决方案4

一个新的，可能是其中最简单的一个。

  $（document）.on（'pagebeforeshow'，'#index'，function（）{
 $（document）.on（'click'，'＃test-button'，function （e）{
 if（e.handled！== true）//这将防止事件触发超过一次
 {
 alert（'Clicked'）; 
 e。处理=真; 
} 
}）; 
}）; 
  

工作jsFiddle示例： http://jsfiddle.net/Gajotres/Yerv9/

可以找到工作示例 这里 。

另外一件事，不要在jQuery Mobile中使用文档，而应该使用适当的页面事件。最好的解决方案是使用只触发一次的pageinit，详细了解它 here 。

I have added dynamic from jQuery in my code, but when I go back one page and return to the page where the 's are added and you press them, they somehow click twice now.

I have tried with an alert('something'); when I click:

$(document).on('click', '#products a', function() {
  alert('something');
}

And it's shown twice when you return to the page. I have tried

$('#products a').remove();

When you click the 'Back' button, because I thought all elements where added twice, but that made no difference.

I don't have anything around these lines, maybe I need $(document).ready(); or something with pageinit?

解决方案

This is also known as a multiple event triggering problem and it is common to jQuery Mobile because of its architecture.

There are several solutions to this problem:

Solution 1

Best solution would be to use pageinit to bind events. If you take a look at an official documentation you will find out that pageinit will trigger ONLY once, just like document ready, so there's no way events will be bound again. This is best solution because you don't have processing overhead like when removing events with off method.

Working jsFiddle example: http://jsfiddle.net/Gajotres/AAFH8/

This working solution is made on a basis of a previous problematic example.

Solution 2

Remove event before you bind it:

$(document).on('pagebeforeshow', '#index', function(){       
    $(document).off('click', '#test-button').on('click', '#test-button',function(e) {
        alert('Button click');
    }); 
});

Working jsFiddle example: http://jsfiddle.net/Gajotres/K8YmG/

Solution 3

Use a jQuery Filter selector, like this:

$('#carousel div:Event(!click)').each(function(){
    //If click is not bind to #carousel div do something
});

Because event filter is not a part of official jQuery framework it can be found here: http://www.codenothing.com/archives/2009/event-filter/

In a nutshell, if speed is your main concern then Solution 2 is much better then Solution 1.

Solution 4

A new one, probably an easiest of them all.

$(document).on('pagebeforeshow', '#index', function(){       
    $(document).on('click', '#test-button',function(e) {
        if(e.handled !== true) // This will prevent event triggering more then once
        {
            alert('Clicked');
            e.handled = true;
        }
    }); 
});

Working jsFiddle example: http://jsfiddle.net/Gajotres/Yerv9/

Working examples can be found here.

One other thing, don't use document ready with jQuery Mobile, use proper page events instead. Best solution would be to use pageinit which triggers only once, read more about it here.

这篇关于页面转换后动态添加元素具有双重效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！