-1

以下のように、JQMアプリで2つの異なるajaxリクエストがあります。最初のページはページフォームの送信で実行され、データがデータベースに書き込まれ、アラートが表示されます。その後、ユーザーは同じシーケンスが発生する次のページにリダイレクトされます。

最初のリクエストは正常に機能しますが、2番目のリクエストは2回実行されます（アラートは2回表示され、データベースは2回書き込まれます）。3番目のリクエストを追加すると、3回実行されます。複数の実行を防ぐにはどうすればよいですか？

$(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ます。これは、ページごとに1回だけ実行されるためです（ロードごとに実行されるため、ページを更新すると、再度発生します）。

また、.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 に答える