jQuery Mobile和带有changePage的多个ajax请求

Question

JQM应用程序中有两个不同的ajax请求，如下所示。第一个是在页面表单提交上执行的，数据被写入数据库，显示警报，然后用户被重定向到发生相同序列的下一个页面。

第一个请求运行良好，但第二个请求执行两次（警报显示两次，数据库写入两次）。如果我添加第三个请求，它会被执行三次等等。我需要做什么来防止多次执行？

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

Answer 1

您会收到多个请求，因为每次显示页面时都会运行这些点击绑定-每次触发pagebeforeshow事件时都会执行这些绑定，因此您运行的每个changePage（）都会向元素的点击回调添加相同的函数。

您需要做的是在应用程序启动时将它们绑定一次。通过查看您的代码，我假设您的应用程序在DOM中同时有多个页面，并通过$.mobile.changePage（）函数对它们进行更改。如果所有页面都存在，则可以在生成后绑定一次单击回调。更具体地说，去掉$(document).live('pagebeforeshow', function () {}，只需在按钮存在后绑定按钮的单击事件。

Answer 2

我建议不要为DOM中的每个页面将事件处理程序绑定到pagebeforeshow事件，而是使用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元素）。