Question

这是我的代码：

$("#infoButton").unbind('click');
                $("#infoButton").click(
                    function(event) {
                        try {
                            bla bla bla....
                        } catch (e) {
                            alert(e);
                        }
                    }
                );

我发现事件已经解除了所有事件的束缚，但“bla bla bla”仍在积累！

事件无法解除绑定。

Jquery版本1.8.2

Answer 1

防止多事件绑定/触发

由于有趣的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：

在这种情况下，您应该使用函数而不是bind。它更快并且意味着要替换bind和delegate。

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

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

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

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

$('#index').on('pagebeforeshow',function(e,data){    
    $(document).off('click tap', '#test-button').on('click tap', '#test-button',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');
            event.handled = true;
        }
    }); 
});

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

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

unbind在JQuery Mobile中不起作用

1 个答案:

防止多事件绑定/触发