JQuery-on（） - メソッド/ダイナミックハンドラ

Question

私は待機リストと参加者のリストを持っています。管理者は、待機リストのユーザー名の他にdivをクリックして、参加者のリストにユーザーを追加できます。

divをクリックして参加者リストに誰かを追加すると、ajaxリクエストが呼び出されます - >このリクエストはデータベース内のユーザーのステータスを更新し、ajaxリクエストが成功すれば参加者にユーザーを追加しますページを再ロードせずにリストはデータベースからリフレッシュされるように見えますが、ユーザーはJQuery経由でリストに追加され、データベース操作はバックで実行されます。

さらに、管理者は参加者の一覧からユーザーを削除できます。これはdiv .event_list_cancelで発生します。管理者が参加者リストからユーザーを削除し、再び待機リストに追加されることをクリックすると、このイベントが発生します。奇妙なことは、私は最初にページに入ったときにリスト/リストからユーザーを追加/削除できるということです。たとえば、ユーザーを待機リストから参加者リストに移動した後、参加者リストの「delete-div」をクリックして戻ると、何も起こりません。私はサイトをリフレッシュし、すべてがデータベースから新鮮に生成されます - それは動作します。 DOMをロードする前に、追加/削除後の要素がそこにあるため、JQuery on（）メソッドがこれを修正することを期待しましたが、何も起こりません。どうすればこの問題を解決できますか？

私は混乱しないことを願っています。

ありがとうございました！

Answer 1

Direct and delegated eventsについてのセクションをご覧ください。

あなたはこのようonを使用する場合、基本的に：

$(".some_button").on("click",function(){}); 

その後、このイベントは、あなたのセレクタに一致する各要素に直接結合されようとしています。セレクタに一致する新しい要素がDOMに追加された場合、それらは追加されません。

しかし、あなたはこのようにそれを使用する場合：

$("#my_wrapper").on("click",".some_button",function(){}); 

その後イベントは、実際に#my_wrapperに添付されます、そして焼成したとき、ターゲットは、それはあなたのセレクタに一致するかどうかがチェックされます。これにより、#my_wrapperに追加された要素は、イベントがバインドされた後で追加されても影響を受けます。

onのこの使用法は、liveとdelegateの旧機能を置き換えています。より良い理解が必要な場合は、それらの文書もお読みください。

Answer 2

キャッシングに関する問題が発生している可能性があります。 onclickメソッドを設定して、コードの最後の2行として変更したいページのセクションでjqueryの.hide（）と.show（）を呼び出してみてください。

Answer 3

フィドルやHTMLがなくても大丈夫ですが、あなたに起こっていると思われることは、あなたがon（）を使っていて、すべての要素に.event_list_cancelのクラスでアクションをバインドしていることです。 on（）メソッドを再初期化するまで$（ '。event_list_cancel'）オブジェクトに含まれていない同じクラスの新しい要素を作成します。

セレクタ$（ '。event_list_cancel'）を再バインドしようとしましたか？（ 'click'、function（e）{... divの後に移動しました。再度バインドあなたの前

あなたは（オフにしたいかもしれませんので、再結合イベントがメモリにどのように影響するか全くわからない）それは....