jQuery Mobile vclick发射了两次

问题描述：

我在解雇vclick（或点击）事件时遇到了问题。jQuery Mobile vclick发射了两次

这是我的html代码：

<!doctype html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 
    <title>Document</title>  
    <link rel="stylesheet" href="css/jquery.mobile-1.3.1.css"> 
    <link rel="stylesheet" href="css/estilo.css"> 
    <script src="js/cordova-2.6.0.js"></script> 
    <script src="js/jquery-2.0.0.js"></script> 
    <script src="js/functions.js"></script> 
    <script src="js/jquery.mobile-1.3.1.js"></script> 

    </head> 
    <body> 
     <div data-role="page" id="page"> 
      <div data-role="header" position="fixed"> 
      <h1>Data</h1> 
      </div> 
      <div data-role="content">  
        <div id="btn_comentar"> 
        <a href="#page4"></a> 
        </div> 
       </div> 
     </div> 
    </body> 
    </html>

这是我functions.js

$(document).bind("mobileinit", function(){ 

    $(document).bind("pageinit",function(){ 

     $("#btn_comentar").bind("vclick",function(e){ 

      console.log(e.isDefaultPrevented()); 
      console.log(e.result); 
      console.log(e.relatedTarget); 
      alert("buttooon"); 

       list_comments(); 

      }); 

    }); 

}

当我点击我的#btn_comentar，我想从功能list_comments检索数据（发送通过ajax）是重复的;我意识到它发送了两次，最后这是我点击我的按钮时的情况。

这是从控制台输出（两次）：假未定义空

并且还警告消息框（两次）“buttoon”;

我试图像一些解决方案：

jQuery Mobile : replace click event by vclick event

但没有成功，请需要一些帮助

这是我的新代码，它现在是如何工作的，但似乎没有jQuery Mobile的默认配置

<!doctype html> 
    <html> 
    <head> 
     <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 
    <title>Document</title> 
    <link rel="stylesheet" href="css/jquery.mobile-1.3.1.css"> 
    <link rel="stylesheet" href="css/estilo.css"> 
    <script src="js/cordova-2.6.0.js"></script> 
    <script src="js/jquery-2.0.0.js"></script> 
    <script src="js/custom-mobile.js"></script> 
    <script src="js/jquery.mobile-1.3.1.js"></script> 
    <script src="js/functions.js"></script> 

     </head> 
     <body> 
      <div data-role="page" id="page"> 
       <div data-role="header" position="fixed"> 
       <h1>Data</h1> 
       </div> 
       <div data-role="content">  
         <div id="btn_comentar"> 
         <a href="#page4"></a> 
         </div> 
        </div> 
      </div> 
     </body> 
     </html>

custom-mobile.js

$(document).bind("mobileinit", function(){ 
     //$.mobile.allowCrossDomainPages = true; 

     });

functions.js

$(document).on("ready",function(){ 
    $("#btn_comentar").bind("vclick",function(){ 
        list_comments(); 
       }); 
});

删除'mobileinit'绑定。你也可以删除'pageinit'，只保留'vclick'的绑定。使用'.on'而不是'.bind'。 – Omar

男人把你的整个HTML代码和一切，所以我可以看到你是如何构造你的HTML和div – abdu

@Omar谢谢，但不是那样工作 – jagudel

答

上pageinit使用一次：

$(document).on('pageinit') { 
$("#btn_comentar").on("vclick",function(e){ 

     console.log(e.isDefaultPrevented()); 
     console.log(e.result); 
     console.log(e.relatedTarget); 
     alert("buttooon"); 

      list_comments(); 

     }); 
}

这应该工作

没有'.ready'与JQM。 – Omar

@Omar Enta sa7，总是谢谢 – Muath

hala garabti，kol saneh o enta salem :) – Omar

答

According to docs，

这些增强功能是基于jQuery Mobile的默认配置应用的，该默认配置旨在用于常见场景，但可能会或可能不会满足您的特定需求。幸运的是，这些设置使用mobileinit事件很容易配置。

所以这就是你需要使用mobileinit。设置默认值是这样的：

$(document).bind('mobileinit', function(){ 
     $.mobile.defaultTransition = 'slideup'; 
});

如果我的理解是正确的，mobileinit包含/烧制之前包括jQuery Mobile的的JS。假设你做了，你的脚本命令必须是这样的：

<script src="jquery.js"></script> 
<script src="custom-scripting.js"></script> <!-- This script must have mobileinit --> 
<script src="jquery-mobile.js"></script>

此时的时间（自定义scripting.js加载时），pageinit不会是定义。这是明智的添加您的pageinit事件AFTER jQM脚本。

<script src="jquery.js"></script> 
<script src="custom-scripting.js"></script> <!-- This script must have mobileinit --> 
<script src="jquery-mobile.js"></script> 
<script> 
    $(document).bind("pageinit", function(){ 
    $(document).bind("vclick", "#btn_comentar" ,function(e){ 
     console.log(e.isDefaultPrevented()); 
     console.log(e.result); 
     console.log(e.relatedTarget); 
     alert("buttooon"); 
     list_comments(); 
     }); 
    }); 
</script>

感谢您的关注和帮助，我做了您所说的，但没有结果，仍然存在同样的问题 – jagudel

我找到了一个解决方案，但我不知道它是否正确，我做了一些更改，如@hungerpain说的，而不是$（document）.bind（“pageinit”，function（）{...}）;我用$（document）.on（“ready”，function（）{...}）;但正如hungerpain所说，这不是jQuery Mobile的默认配置。 – jagudel

@jagudel能否在此处发布您的代码，以便我们能够更正此问题？你不是spsd使用'ready'。 – krishgopinath

答

我遇到的双vclicks的另一个原因是由于Chromium除了鼠标事件以外还综合了两个触摸事件。我通过在桌面Chrome的开发人员“设备模式”（鼠标光标变成圆圈）中运行应用程序，确认问题存在，然后切换设备模式并确认问题“已修复”，从而确认了此原因。

jblas discusses it，部分摘录：

注意V单击不抑制合成鼠标/点击由浏览器产生的，因为它不知道使用什么样的背景下，在事件和表单输入元素要求鼠标/点击事件正常运行。

如果您使用操纵杆或鼠标（桌面），则警报将在正常的鼠标单击事件时触发。

如果您想要在使用touch时抑制点击事件，则必须在vclick处理程序中调用event.preventDefault（）。这将对请求进行排队以终止接下来的点击事件，但由于设备供应商实施其事件的方式不同以及不同的android操作系统版本中的一些错误，事实证明这很难做到。我们尝试了几种方法来确定是否要终止点击事件......一个是基于触发事件触发的元素，另一个是触摸事件的位置。这是必要的，因为浏览器不一定会将鼠标事件分派到它用于触摸事件的相同元素。

jQuery Mobile vclick发射了两次

相关推荐