jQuery Mobile和多個Ajax請求與changePage

-1

我在JQM應用程序中有兩個不同的ajax請求，如下所示。第一個在頁面表單提交中執行，數據寫入數據庫，顯示警報，然後用戶重定向到發生相同序列的下一頁。jQuery Mobile和多個Ajax請求與changePage

第一個請求正常工作，但第二個請求執行兩次（警報顯示兩次，數據庫寫入兩次）。如果我添加第三個請求，它會執行三次等等。我需要做什麼來防止多次執行？

$(document).live('pagebeforeshow', function() { 
    $("#Step1").click(function(){ 

    var formData = $("#step1").serialize(); 

    $.ajax({ 
     type: "POST", 
     url: "scripts/script.php?type=Step1", 
     cache: false, 
     data: formData, 
     success: function(data) { 
      if(data.status == 'success') { 
      alert('success Step1'); 
      //When finished redirect to the next step 
      $.mobile.changePage('#Step2', {transition: "slideup"}); 
     }    
      else if(data.status == 'error') { 
      alert('error'); 
       $("#notification").text(data.message); 
      } 
     },   
     //error: onError   
    }); 

    return false; 
    }); 

    $("#Step2").click(function(){ 
    var formData = $("#step2").serialize(); 

    $.ajax({ 
     type: "POST", 
     url: "scripts/script.php?type=Step2", 
     cache: false, 
     data: formData, 
     success: function(data) { 
      if(data.status == 'success') { 
      alert('success Step2'); 
      //When finished redirect to the next step 
      $.mobile.changePage('#Step3', {transition: "slideup"}); 
     }    
      else if(data.status == 'error') { 
      alert('error'); 
       $("#notification").text(data.message); 
      } 
     },   
     //error: onError 
    }); 

    return false; 
    }); 
});

來源

2012-09-03 byoung

接受提供的答案。 – tylerl

因爲你運行這些點擊綁定頁面顯示每次你越來越多的要求 - 他們跑每pagebeforeshow觸發事件的時間，所以每changePage（）運行添加相同的功能元素的點擊回電話。

你需要做的是在應用程序啓動時將它們綁定到一次。通過查看代碼，我假設您的應用程序在DOM中同時存在多個頁面，並且您可以通過$ .mobile.changePage（）函數更改它們。如果所有頁面都存在，您可以在點擊回調生成後將其綁定一次。更具體地說，擺脫$(document).live('pagebeforeshow', function() {}，只要將它們存在的按鈕的點擊事件綁定即可。

來源

2012-09-03 14:53:33

而是結合事件處理程序的pagebeforeshow事件在DOM每一頁，我建議使用pageinit事件，因爲它只每頁運行一次（每個負載，因此，如果您刷新頁面，它會再次觸發）。

此外，.live()折舊在jQuery 1.7的，所以這是一個好主意，開始使用.on()：

//run event handler for each pseudo-page as it initializes (runs once per pseudo-page) 
$(document).on("pageinit", ".ui-page", function() { 

    //bind event handler to #Step1, #Step2 click events 
    $(this).find("#Step1").on("click", function() { /*event handler code here*/ }); 
    $(this).find("#Step2").on("click", function() { /*event handler code here*/ }); 
});

這樣，您將附加的事件處理程序只有一次，你將確保將其連接到正確的元素（如果你一次在DOM中有多個僞頁面，這確保你得到正確的#Step1元素）。

來源

2012-09-03 15:55:04 Jasper

jQuery Mobile和多個Ajax請求與changePage

回答

相關問題