-1

私の質問を簡単にするために、私は index.php を次のようにしています:

<button>A</button>
<div id="DivHolder"></div>

まず、ボタン A ( index.php内) をクリックし、イベントをトリガーします。

$.ajax({
   url:"getButtonB.php"
})

次に、 $.ajax が成功した後、ボタン B ( getButtonB.php から生成されます) を取得し、index.phpに追加します。最後に、index.phpでは、次のようになります。

<div id="DivHolder"><button class="pill YES">B</button></div>

次に、JavaScript コード:

$("#DivHolder").on("click",".pill",function(){
    var thisButton=$(this);
    if(thisButton.hasClass("NO")){
        $.ajax({
              url:"doingSomethingOne.php",
              type:"POST"
        });
        thisButton.removeClass("NO");
        thisButton.addClass("YES");
    }else if(thisButton.hasClass("YES")){
         $.ajax({
              url:"doingSomethingTwo.php",
              type:"POST"
        });
        thisButton.removeClass("YES");
        thisButton.addClass("NO");
    }
});

ここにあるコードはこれですべてです。これらのコードが必要なのは、ボタン A をクリックするとボタン B が表示されることです。次にボタン B をクリックすると、ボタン B をもう一度クリックすると、キャンプへの登録など、何かが実行されます。それはキャンプを登録解除します。すべての違いは、ボタン B のクラスです。クラスがYESの場合は、クリックして登録解除します。クラスがNOの場合は、クリックして登録します。

しかし、これらは機能しません。実際のプロジェクトでは、ボタン B の背景色を変更して、別のステータス (YES または NO) を表示します。ボタンBをクリックすると、背景色が変更されますが、元の色に戻ります。$.ajax() を起動します (上記の場合、url:"doingSomethingTwo.php"を起動します)。2 回目のクリックでは、他の $.ajax(); はトリガーされません。

最も奇妙なことは次のとおりです。

  1. 上記のスクリプトから $.ajax() を削除すると、クラスを変更するだけで (または私のプロジェクトでは、ボタン B の背景色を変更するだけで)、機能します。ボタン B をクリックすると赤色に変わり、もう一度クリックすると黄色に戻ります。

  2. ボタン B が動的に生成されていない場合、ボタン B がindex.phpのハードコードであるとしましょう。この場合、もちろんonを使用せずにイベントをバインドします。

    $(".pill").click(function(){
    //do something
})

その後、すべてが順調です。背景色を変更し、それに応じて $.ajax を起動します。

誰かが私の問題を解決できる場合は、助けてください。前もって感謝します。

4

1 に答える 1

0

Ajax リクエストは非同期であるため、ajax リクエストを定義した直後にクラスを削除または追加しようとしても、期待どおりに機能しません。必要なのは、Ajax リクエストが完了したかどうかを知る方法です。完了している場合は、必要に応じて必要なクラスを追加/削除します。非常に簡単な例を次に示します。

var xhrOne = $.ajax({
  url:"doingSomethingOne.php",
  type:"POST"
});

xhrOne.done(function () {
  thisButton.removeClass("NO");
  thisButton.addClass("YES");
});
于 2013-02-26T16:24:53.717 に答える