在history.back（）之後點擊兩次或多次事件Phonegap

我在phonegap中有兩個html頁面。 index.html和second.html. 我把所有的腳本放在頭部。在index.html頁面我把我所有的JQuery和Ajax代碼。以下是我用來更改頁面的一些代碼片段。在history.back（）之後點擊兩次或多次事件Phonegap

的Index.html

 <!DOCTYPE html> 
      <html> 
      <head> 
     <meta charset="utf-8" /> 
     <meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
     <meta name="apple-mobile-web-app-capable" content="yes" /> 
     <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
     <title> 
     </title> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
     <link rel="stylesheet" href="css/mystyle.css" /> 



     <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"> 
     </script> 
     <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
     <script type="text/javascript" src="cordova-2.7.0.js"></script> 
     <script type="text/javascript" src="js/index.js"></script> 
     <script> 
     </head> 
     function callAnothePage(check) 
      { 
       $.mobile.changePage('second.html', { dataUrl : "second.html?paremeter="+check, data : { 'paremeter' : check }, reloadPage : false, changeHash : true }); 
      } 
     $(document).on('pageshow', "#second",function() { 
       var parameters = $(this).data("url").split("?")[1];; 
       parameter = parameters.replace("paremeter=",""); 
       }); 
     $(document).on('pageshow', "#index",function() { 
       $(document).on('click', "#news",function() { //Something Something }); 
}); 
    $(document).on('pageshow', "#second",function() { 
    $(document).on('click', "#back",function() {  

       history.back(); 
      }); 
    </script> 


     <body> 
     <!-- Home --> 
     <div data-role="page" id="index"> 
      <div data-role="header"> 
       <h3> 
        Title 
       </h3> 
      </div> 
      <div data-role="content"> 
       <img src="img/logo5.png" /> 

       <a data-role="button" id="news">News</a> 

      </div> <!--content--> 

      <div data-role="content"> 
      <div><span class="status"></span></div> 

       </div> <!--content--> 
     </div><!--page--> 
     </body> 
     </html>

這樣的事情。而我

second.html

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
    <title> 
    </title> 

    </head> 
    <body> 
    <!-- Home --> 
    <div data-role="page" id="second"> 
     <div data-role="header"> 

      <div id="new_title"> 

      </div> 
     </div> 
     <div data-role="content"> 
      <div id="news_date" class="mybutton"></div> 
      <br/> 
      <div id="news_description"></div> 
      <br/><br/> 
      <a data-role="button" id="back" class="mybutton_back">Back</a> 
     </div> <!--content--> 
    </div><!--page--> 

    </body> 
</html>

所以第一次它工作正常。所有的事件都很好。它在點擊按鈕後使用jquery做了一些工作，並轉到second.html頁面。查看後second.html我回來了使用history.back()然後問題開始。所有按鈕點擊都可以工作兩次。所有的Ajax電話都在工作兩次。如果我再次回到第二頁並回來，那麼事件會發射三次，依此類推。我認爲腳本被加載多次。我想嘗試$.mobile.changePage()回到index.html但情況變得更糟。然後全部events失敗。如果我使用它，沒有點擊事件或ajax調用。

如何阻止？我怎樣才能防止腳本多次加載？
或有什麼辦法讓我可以完全加載頁面？我的意思是所有以前的腳本加載將被遺忘？

來源

2013-11-29 AtanuCSE

請爲此創建一個JSfiddle ..以便更好地理解... –

你可以使用一些替代... –

被放置在錯誤的位置... – Purus

您的代碼有問題。如果你多次點擊按鈕，它會執行很多次。爲什麼？因爲一旦你點擊按鈕，事件點擊將執行1，然後點擊它將執行1 + 1事件點擊先前，如此點擊1 + 1 + 1，如果你點擊很多時間，...
防止事件的解決方案很多事時間： 1.使用過（）或一個：

$('#back').off().on('click',function(){ 

}); 
$('#back').one('click',function(){ 

});

2.使用標誌：

var flag = true; 
$('#back').on('click',function(){ 
    if(flag){ 
     flag = false; 
     //code here 
    } 
});

並檢查link看多。

來源

2013-11-30 02:09:49

$(document).on('click', "#back",function() { 
      if(event.handled !== true) 
      { 
       $.mobile.defaultPageTransition = "slide";     
       var href = $(this).attr("href"); 
       event.preventDefault(); 
       if (event === "click") { return; }      
       $.mobile.changePage(href); 
      } 
      return false;    
    });

來源

2013-11-29 06:24:06 Ved

不一樣，結果相同。返回index.html後再燒兩次 – AtanuCSE

實測值的溶液中。

document.location = "index.html"

使用它去上一頁，防止事件發生兩次。無法解釋爲什麼，但爲我工作。

來源

2013-11-29 08:48:42 AtanuCSE

在history.back（）之後點擊兩次或多次事件Phonegap

回答

相關問題