所有jQuery移动事件都会触发两次

Aka*_*nde 6 javascript jquery html5 css3 jquery-mobile

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

        <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> 
Run Code Online (Sandbox Code Playgroud)

由于某种原因,这个事件发射了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>
Run Code Online (Sandbox Code Playgroud)

Gaj*_*res 14

避免这个问题的方法很少.就像CodeJack告诉你这是一个已知的问题,但它不是一个错误,主要是因为jQM处理页面的独特方式.

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

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

    如果您有其他绑定到同一对象的事件,请使用以下命令:

    $("body").off("swipeleft").on("swipeleft", function(event) {
        alert('hello');
        /*window.location.href = "html/first.html";*/             
    });
    
    Run Code Online (Sandbox Code Playgroud)
  • 有一种替代方法可以使用事件绑定/解除绑定,生存/死亡和开/关.在再次绑定之前不使用解绑定,而是使用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 
    });
    
    Run Code Online (Sandbox Code Playgroud)

    我正在使用每个因为我的旋转木马div有许多内部块但原则是相同的.如果#carousel内部div元素没有click事件,则添加该事件.在您的情况下,这将阻止多个事件绑定.

其他解决方案可在此处找到.