更多信息

Question

我动态填充列表，然后点击后我有多个事件调用。第一次重复1次，第2次重复2次，第3次重复3次等等。

Answer 1

首先，在我的其他答案中可以找到有关此问题的更多信息： jQuery Mobile: document ready vs page events

防止多事件绑定/触发

由于有趣的jQM加载架构，多事件触发是一个常见问题。例如，看一下这段代码snipet：

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

使用jsFiddle示例：http://jsfiddle.net/Gajotres/CCfL4/

每当您访问 #index 页面时，点击事件将被绑定到按钮 #test-button 。有几种方法可以防止这个问题：

解决方案1：

在绑定事件之前删除事件：

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

使用jsFiddle示例：http://jsfiddle.net/Gajotres/K8YmG/

如果您有不同的事件绑定到对象：

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

解决方案2：

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

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

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

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

解决方案3：

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

$(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;
        }
    }); 
});

使用jsFiddle示例：http://jsfiddle.net/Gajotres/Yerv9/

此解决方案的sholsinger Tnx：http://sholsinger.com/archive/2011/08/prevent-jquery-live-handlers-from-firing-multiple-times/

jQuery mobile listview多次点击事件

1 个答案:

防止多事件绑定/触发

更多信息