jQuery ajaxでノードを動的に追加してもクリックイベントをトリガーできない問題を解決する方法

データをロードするために ajax を作成したときに、後で追加したデモ ノード要素が以前のクリック イベントを失っていることがわかりました。この問題を解決するにはどうすればよいですか?以下のエディターは、jQuery ajax で動的に追加されたノードがクリック イベントをトリガーできない問題の解決策を提供します。お役に立てれば幸いです。

データをロードするために ajax を書いているときに、後から追加されたデモ ノード要素が前のクリック イベントを失っていることがわかりました。クリック イベントが失敗するのはなぜですか?どうすれば解決できますか?

実際、最も簡単な方法は onclick="" をタグに直接記述することですが、この方法で記述するのは実際には少し負荷がかかります。クラス名 クリックイベント。

jQuery ajax が動的に追加したノードがイベントをトリガーできない問題に対する 2 つの解決策 より良いデモンストレーション効果を実現するために、ページの本文の下に次の構造のコードがあると想定します:

 <ul id="demo">
  <li class="demo1">a1</li>
  <li class="demo1">a2</li>
  <li class="demo1">a3</li>
 </ul> 
 <script type="text/javascript">
 $("#demo").click(function(){
  $("#demo").append('<li class="demo1">aaa4</li>'); //动态像ul的末尾追加一个新元素
 });
 </script>

方法 1: live を使用します。 :

live() 関数は、1 つ以上のイベント ハンドラーを選択した要素にバインドし、これらのイベントの発生時に実行する関数を指定します。 live() 関数は、セレクターに一致する現在および将来の要素に適用されます。たとえば、スクリプトを通じて動的に作成される要素などです。

実装は次のとおりです:

$('.demo1').live('click', function(){
 alert('OK');
});

メソッド 2: on を使用します:

on メソッドを使用してイベントをバインドでき、その親または本体にバインドできます。実装は次のとおりです。 2 つのメソッド、両方 これにより、クリック イベントをトリガーできないノードを動的に追加する jQuery ajax の問題を解決できます。方法が分かったので、早速試してみましょう。

関連する推奨事項:

JQuery はクリック イベントをシミュレートし、イベントを自動的にトリガーします

js はクリック イベントをシミュレートします

js でクリック イベントを動的に追加する際の一般的なエラーの詳細な説明

以上がjQuery ajaxでノードを動的に追加してもクリックイベントをトリガーできない問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。