-1

我在 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;
  });
});
4

2 回答 2

1

我建议不要将事件处理程序绑定到pagebeforeshowDOM 中的每个页面的事件，而是使用该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-03T15:55:04.620 回答
1

由于每次显示页面时都运行这些单击绑定，因此您会收到多个请求 - 它们在每次触发 pagebeforeshow 事件时运行，因此您运行的每个 changePage() 都会将相同的函数添加到元素的单击回调中。

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

于 2012-09-03T14:53:33.743 回答