0

Ajax POSTが成功した後、投票ボタンを無効にする関数を作成しようとしています。投票ボタンは、POSTが完了するまで有効になり、その後、「無効」スタイルで修正され、クリック可能になります。jQuery .not（）を使用して、クリックされたボタンからの関数の開始を無効にしようとしています（クラス'disabled'）が、あまり運がありません。これが私の関数のフィドルです。私の問題を確認できます。何が欠けているのかわかりませんが、誰かが私のエラーを見つけるのを手伝ってくれることを願っています。それは私を苛立たせます:)

jQueryコード：

$("a.votebutton").not(".disabled").each(function(index) {
  var el = $(this);
  $(this).click(function() {
      el.addClass("active disabled").unbind("click");
      el.siblings().addClass("disabled");
  });
});

</ p>

4

1 に答える 1

4

問題は、コードが次のことです。

$("a.votebutton").not(".disabled")

コード行の実行時に無効になっていないすべてのリンクを選択してから、クリックハンドラーの割り当てをループします。これらのクリックハンドラーは、後で「disabled」クラスが与えられた場合でも、これらのリンクにバインドされたままになります。したがって、クリックされた要素の兄弟に「disabled」クラスを追加すると、それらの兄弟には引き続き機能するクリックハンドラーがあります。それを修正する必要がある兄弟からクリックのバインドを解除する場合：

// change
el.siblings().addClass("disabled");
// to be
el.siblings().addClass("disabled").unbind("click");

.each()：は必要ないことに注意してください。

$("a.votebutton").not(".disabled").click(function() {
      $(this).addClass("active disabled").unbind("click")
             .siblings().addClass("disabled").unbind("click");
});

これを行う別の方法は、委任されたイベント処理を使用することです。

$("div.panel").on("click", "a.votebutton:not(.disabled)", function() {
   $(this).addClass("active disabled")
          .siblings().addClass("disabled");
});

このように、クリックは、含まれているdiv（ "div.panel"）にバブルアップしたときにのみ処理されます。その時点で、クリックハンドラーは、イベントのソース要素がの2番目のパラメーターであるセレクターと一致する場合にのみ実行され.on()ます。

更新されたデモ：http：//jsfiddle.net/RSezp/2/

于 2012-05-23T01:05:51.043 に答える