Javascript 页面转换后动态添加元素的双重效果

我在代码中添加了来自jQuery的动态，但是当我返回一个页面并返回到添加了的页面时，您按下它们，它们不知怎么地单击了两次

我试过发出警报（“某物”）；当我点击：

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

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

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

当你点击“后退”按钮时，因为我认为所有元素都添加了两次，但这没有什么区别

---

我没有这些行的任何内容，可能我需要$（document）.ready（）；或者使用pageinit？

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

此问题有几种解决方案：

解决方案1 最好的解决方案是使用pageinit来绑定事件。如果您查看一个官方文档，您会发现

pageinit

只会触发一次，就像documentready一样，因此事件无法再次绑定。这是最好的解决方案，因为您不需要像使用off方法删除事件那样的处理开销

工作JSFIDLE示例：

此工作解决方案是在前面一个有问题的示例的基础上制定的

解决方案2 在绑定事件之前删除它：

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

工作JSFIDLE示例：

解决方案3 使用jQuery筛选器选择器，如下所示：

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

由于事件筛选器不是正式jQuery框架的一部分，因此可以在以下位置找到：

简而言之，如果速度是您主要关心的问题，那么解决方案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;
        }
    }); 
});

工作JSFIDLE示例：

工作示例可以在中找到

---

还有一件事，不要在jQuery Mobile中使用DocumentReady，而是使用适当的页面事件。最好的解决方案是使用只触发一次的pageinit，请阅读更多关于它的信息