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

來源

2013-07-09 jagudel

刪除'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(); 

     }); 
}

這應該工作

來源

2013-07-09 22:59:07 Muath

沒有'.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>

來源

2013-07-10 07:14:25 krishgopinath

感謝您的關注和幫助，我做了您所說的，但沒有結果，仍然存在同樣的問題 – 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操作系統版本中的一些錯誤，事實證明這很難做到。我們嘗試了幾種方法來確定是否要終止點擊事件......一個是基於觸發事件觸發的元素，另一個是觸摸事件的位置。這是必要的，因爲瀏覽器不一定會將鼠標事件分派到它用於觸摸事件的相同元素。

來源

2016-04-26 08:49:33 Treer

jQuery Mobile vclick發射了兩次

回答

相關問題