1

我在我的代码中添加了来自 jQuery 的动态，但是当我返回一页并返回添加 's 的页面并按下它们时，它们现在以某种方式单击了两次。

我试过用 alert('something'); 当我点击：

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

当您返回页面时，它会显示两次。我努力了

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

当您单击“返回”按钮时，因为我认为所有元素都添加了两次，但这并没有什么区别。

这些行我没有任何东西，也许我需要 $(document).ready(); 或pageinit的东西？

4

1 回答 1

3

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

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

解决方案 1

最好的解决方案是使用pageinit绑定事件。如果您查看官方文档，您会发现它pageinit只会触发一次，就像文档准备好一样，因此事件不会再次被绑定。这是最好的解决方案，因为您没有像使用 off 方法删除事件时那样的处理开销。

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

这个可行的解决方案是基于前面有问题的例子。

解决方案 2

在绑定之前删除事件：

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

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

解决方案 3

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

$('#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 好得多。

解决方案 4

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

$(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/

工作示例可以在这里找到。

另一件事，不要使用 jQuery Mobile 准备好的文档，而是使用适当的页面事件。最好的解决方案是使用仅触发一次的 pageinit，请在此处阅读更多信息。

于 2013-10-30T15:50:34.733 回答