所有 jQuery 移动事件触发两次答案

【问题标题】：All jQuery mobile events firing twice所有 jQuery 移动事件触发两次
【发布时间】：2013-01-02 21:47:01
【问题描述】：

我的索引页面上有一个非常简单的用例。

        <script src="js/jquery-min.js"></script>
        <script src="js/jquery-mobile.js"></script>
        <script type="text/javascript" src="cordova-2.2.0.js"></script>

         <script>
                 $("body").on("swipeleft", function(event) {
                alert('hello');
                /*window.location.href = "html/first.html";*/             
            });
       </script>

由于某种原因，此事件触发了 2 次。现在我确定我没有在 body 标记上绑定另一个事件，因为这是第一页。我也尝试过其他简单的事件，比如 touchstart 等。它们都触发了两次。我做错了什么？

更新：-

我已通过以下方式修改了我标记为正确的答案并且它有效。此页面上的事件不会触发两次。

<head>
      <script type="text/javascript" src="js/jquery-min.js"></script>
            <script>
                 $(document).bind("mobileinit", function() {
                       $.mobile.autoInitializePage = false;
                       $.mobile.defaultPageTransition = 'none';
                       $.mobile.touchOverflowEnabled = false;
                       $.mobile.defaultDialogTransition = 'none';
                       $.mobile.loadingMessage = '' ;                 
                  });
            </script>
            <script type="text/javascript" src="js/jquery-mobile.js"></script>
            <script type="text/javascript" src="cordova-2.2.0.js"></script>
</head>

【问题讨论】：

@Floradu88 ：您对此感到抱歉。我尝试了一些解决方案，但还没有得到确切的答案。但我会标记我正在研究的那个。
你应该只标记正确的答案，不要标记不正确的答案
是的，但是我标记为正确的那个对它进行了一些更改。我会相应地更新答案。

标签： javascript jquery html css jquery-mobile

【解决方案1】：

这是已知问题...我发现可以通过将 js 代码移动到 <head> 标签中来避免它。我不知道原因..但这避免了问题...

【讨论】：

【解决方案2】：

有几种方法可以避免这个问题。就像CodeJack 告诉你的那样，这是一个已知问题，但不是错误，主要是因为 jQM 处理页面的独特方式。

最简单的方法是在再次绑定之前取消绑定事件，如下所示：

$("body").off().on("swipeleft", function(event) {
    alert('hello');
    /*window.location.href = "html/first.html";*/             
});

如果您有其他事件绑定到同一个对象，请使用：

$("body").off("swipeleft").on("swipeleft", function(event) {
    alert('hello');
    /*window.location.href = "html/first.html";*/             
});

除了使用事件绑定/取消绑定、live/die 和 on/off 之外，还有另一种方法。在再次绑定之前不要取消绑定，使用 jQuery 事件过滤器，它可以用来识别事件是否已经被绑定。不要忘记从下面发布的链接下载它（它不是 jQM 的标准部分）。

http://www.codenothing.com/archives/2009/event-filter/

这是我的用法示例：
```
$('#carousel div:Event(!click)').each(function(){ 
    //If click is not bind to #carousel div do something 
});
```
我使用每个是因为我的轮播 div 有许多内部块，但原理是相同的。如果#carousel 内部 div 元素没有点击事件，则添加该事件。在您的情况下，这将防止多个事件绑定。

可以找到其他解决方案here。

【讨论】：

【解决方案3】：

您应该尝试使用文档就绪事件将事件附加到正文。此外，您可能希望将事件只附加一次到正文。

$(document).ready(function(){
    $("body").off().on("swipeleft", function(event) {
        alert('hello');          
    });
});

如果您有其他事件绑定到同一对象，请使用：

$(document).ready(function(){
    $("body").off("swipeleft").on("swipeleft", function(event) {
        alert('hello');          
    });
});

【讨论】：