所有jQuery移动事件触发两次

All jQuery mobile events firing twice

本文关键字：两次 jQuery 移动 事件 所有      更新时间：2023-09-26

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

        <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>

有几种方法可以避免这个问题。就像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";*/             
});

  • 有一个替代使用事件绑定/解绑定，活/死和开/关。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 
});

    我使用每个，因为我的carouseldiv有许多内部块，但原则是相同的。如果#carousel内部div元素没有click event，添加事件。在你的例子中，这将防止多个事件绑定。

其他解决方案可以在这里找到。

您应该尝试使用document ready event将事件附加到body。此外，您可能希望仅将事件附加一次到body。

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

如果你有其他事件绑定到同一个对象，使用这个:

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

这是已知的问题…我发现它通过移动<head>标签内的js代码来避免…我不知道原因…但这避免了问题…

相关文章：