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事件，因为它每页只运行一次（每次加载，所以如果刷新一个页面，它会再次发射。）

此外，自{jQuery 1.7}起，.live()已弃用，因此最好开始使用.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元素。）

使用changePage的jQuery Mobile和多个ajax请求

2 个答案: