javascript - 動的ロードとイベントのバインド後にイベントが機能しないことについての質問

Question

Ajax を使用して 3 つの p ボックスを動的に作成した後、クリック イベントをボックスにバインドすると機能しないのはなぜですか? ajax の作成時にイベントをバインドすることのみが有用ですか?これにより 3 回バインドされます。これはなぜですか?もっと良い方法はありますか？

Answer 1

たとえば、jquery の実装を見てみましょう

リーリー リーリー リーリー

Answer 2

$(document).on('click','#a',function(){ //TODO }); 1階の回答を拝借すると、まず親要素を見つけてからバインドできると思います

Answer 3

動的にロードされた DOM で onclick を使用しても機能しません。 $(document).on('click','#a',function(){} ) を使用すると機能します。試してみてください。

Answer 4

これを実現するには、たとえばイベント委任を使用できます

リーリー

ラッパーにリスト（.list）を追加したい場合は、次のようにデリゲートを書くことができます（簡単な書き方）:

リーリー

Answer 5

JQ の on メソッドとデリゲート メソッドを使用できます。ネイティブの場合は、イベント委任を使用します。