Jquery mobile jQuery Mobile vclick启动了两次_Jquery Mobile_Cordova

Jquery mobile jQuery Mobile vclick启动了两次

jquery-mobile cordova

Jquery mobile jQuery Mobile vclick启动了两次,jquery-mobile,cordova,Jquery Mobile,Cordova,我在触发vclick（或click）事件时遇到问题这是我的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</ti

我在触发vclick（或click）事件时遇到问题

这是我的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>

当我单击我的#btn_comentar时，我想从函数列表_注释（通过ajax发送）中检索的数据被复制；我意识到它发送了两次，最后当我点击我的按钮时，它是关于什么的

这是控制台的输出（两次）：错误的未定义空的

以及警报消息框（两次）“按钮”

我尝试过一些解决方案，如：

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

这是我的新代码以及它现在的工作方式，但似乎没有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>

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();

          });

   });

}

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

在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();

      });
}

这应该有效

在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();

      });
}

这应该是可行的

这些增强功能是基于jquerymobile的默认配置应用的，该配置设计用于常见场景，但可能与您的特定需求相匹配，也可能不匹配。幸运的是，使用

mobileinit

事件可以轻松配置这些设置

这就是您需要使用的

mobileinit

。对于如下设置默认值：

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

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

如果我的理解是正确的，

mobileinit

在包含jQuery-Mobile的js之前被包含/触发。假设您这样做了，您的脚本顺序必须如下所示：

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

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

这些增强功能是基于jquerymobile的默认配置应用的，该配置设计用于常见场景，但可能与您的特定需求相匹配，也可能不匹配。幸运的是，使用

mobileinit

事件可以轻松配置这些设置

这就是您需要使用的

mobileinit

。对于如下设置默认值：

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

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

如果我的理解是正确的，

mobileinit

在包含jQuery-Mobile的js之前被包含/触发。假设您这样做了，您的脚本顺序必须如下所示：

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

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

我遇到的双vClick的另一个原因是，除了鼠标事件之外，还有两个触摸事件。我在desktop Chrome的开发者“设备模式”（鼠标光标变为圆形）下运行应用程序，确认问题存在，然后关闭设备模式，确认问题已“修复”，从而确认了这一原因

，部分摘录：

请注意，vclick不会抑制由浏览器生成的合成鼠标/单击事件，因为它不知道在什么上下文中使用它，并且表单输入元素要求鼠标/单击事件正常工作

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

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

，部分摘录：

请注意，vclick不会抑制由浏览器生成的合成鼠标/单击事件，因为它不知道在什么上下文中使用它，并且表单输入元素要求鼠标/单击事件正常工作

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

删除

mobileinit

绑定。您也可以删除

pageinit

，只需保留

vclick

绑定即可。使用

.on

而不是

.bind

.Man将您的整个html代码和所有内容放在一起，这样我就可以看到您是如何构建html和div的了inside@Omar谢谢，但不是像这样工作that@abdu我已经更新了html代码，然后使用jQuery1.9，jQuery2.0将导致jQM1.3出现问题。另外，只有

mobileinit

应该保留在functions.js中，其余的在jquery mobile.js.Remove

mobileinit

绑定后移动它们。您也可以删除

pageinit

，只需保留

vclick

绑定即可。使用

.on

而不是

.bind

mobileinit

应该保留在functions.js中，其余的在jquery mobile.js之后移动它们。@Omar Enta sa7，总是感谢shala garabti，kol saneh o Enta salem:）@Omar