2

我通常会阻止多次绑定到这样的元素：

$(document)
    .find('.ui-input-search input')
    .filter(function() { return $(this).jqmData('bound') !== true; })
    .jqmData('bound', true)
    .on('change keyup', function (e) {
        //do sth
    });

当元素在页面上并且“准备好使用”时，效果很好。

问题是，我想对动态添加到页面的元素做同样的事情。在这些元素上，JQM 在某些情况下不会增强元素，因此绑定到正在创建的元素有时不起作用。

问题：
如果我不想在 pagehide 上取消绑定，我将如何更改上述代码以在设置绑定后也锁定元素？

所以我想做这样的事情：

$(document).on('change keyup','.ui-input-search input', function (e) {
  // bind to the selector only once
});

但由于 IE，我不能使用:not选择.ui-input-search input:not(.bound)器，所以我很好奇：

感谢您的反馈！

4

3 回答 3

1

There are several methods, you can find them in my other ARTICLE, or find them HERE. Just search for the chapter: Prevent multiple event triggering.

Prevent multiple event triggering

Because of interesting jQM loading architecture, multiple event triggering is a constant problem. For example, take a look at this code snipet:

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

Or you can test it here: http://jsfiddle.net/Gajotres/yWTG2/

Each time you visit page #index click event will is going to be bound to button #test-button. There are few ways to prevent this problem:

Solution 1:

Remove event before you bind it:

$('#index').live('pagebeforeshow',function(e,data){    
    $('#test-button').die().live('click', function(e) {
        alert('Button click');
    });    
});

In case you have different events bound to an object:

$('#index').live('pagebeforeshow',function(e,data){    
    $('#test-button').die('click').live('click', function(e) {
        alert('Button click');
    });    
});

Solution 2:

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 3:

A new one, probably an easiest of them all.

$(document).on('pagebeforeshow', '#page', function(event){  
    if(event.handled !== true) // This will prevent event triggering more then once
    {
        // Some code
        event.handled = true;
    }
    return false;                
});

Tnx to sholsinger for this solution: http://sholsinger.com/archive/2011/08/prevent-jquery-live-handlers-from-firing-multiple-times/

pageChange event quirks - triggering twice

Sometimes pagechange event can trigger twice and it does not have anything to do with the problem mentioned before.

The reason the pagebeforechange event occurs twice is due to the recursive call in changePage when toPage is not a jQuery enhanced DOM object. This recursion is dangerous, as the developer is allowed to change the toPage within the event. If the developer consistently sets toPage to a string, within the pagebeforechange event handler, regardless of whether or not it was an object an infinite recursive loop will result. The pageload event passes the new page as the page property of the data object (This should be added to the documentation, it's not listed currently). The pageload event could therefore be used to access the loaded page.

In few words this is happening because you are sending additional parameters through pageChange.

Example:

<a data-role="button" data-icon="arrow-r" data-iconpos="right" href="#care-plan-view?id=9e273f31-2672-47fd-9baa-6c35f093a800&amp;name=Sat"><h3>Sat</h3></a>

Conclusion

Solution under number 3 is your best bet. Binding and unbinding can be process demanding.

于 2013-03-14T17:18:19.117 回答
1

但我不能使用 :not 选择器 .ui-input-search input:not(.bound) 因为 IE，所以我很好奇：

引用浏览器支持页面：

无论浏览器是否支持 CSS 选择器，所有列在api.jquery.com/category/selectors/的选择器在作为 jQuery 函数的参数传递时都将返回正确的元素集。

:not无论浏览器的 CSS 引擎是否支持选择器，您都可以在使用 jQuery 形成集合时使用选择器。

于 2013-03-14T16:52:39.827 回答
0

我通常使用命名空间。

$('.selector').unbind('change.namespace').bind('change.namespace', function () {

因为我使用命名空间来绑定它，所以我可以从具有该命名空间的所有元素中删除它，而不必担心删除其他处理程序。

于 2013-03-14T16:52:37.080 回答