ホームページ > 記事 > ウェブフロントエンド > jquery_jqueryで動的に追加された要素ノードがイベントをトリガーできない問題を解決する2つの方法
たとえば、メッセージリストを読み取るための ajax を作成する場合、$(".reply").click(function(){ // を使用すると、クラス「reply」を持つ各メッセージの後ろに返信ボタンが表示されます。何かをしてください... })、おそらく、後で ajax を通じてロードされるリスト内の返信ボタンのクリック イベントは無効になります。
実際最も簡単な方法 はタグに直接 onclick="" を記述することですが、この方法で記述するのは実際には少し負荷がかかります。クラス名 クリックイベントを設定します。
jquery に動的に追加された要素ノードがイベント をトリガーできない問題には、次の 2 つの解決策があります。
より良いデモンストレーション効果を実現するために、ページの本文の下に次の構造のコードがあると想定します。
<p id="pLabel">新加一条</p> <ul id="ulLabel"> <li class="liLabel">aaa1</li> <li class="liLabel">aaa2</li> <li class="liLabel">aaa3</li> </ul> <script type="text/javascript"> $("#pLabel").click(function(){ $("#ulLabel").append('<li class="liLabel">aaaQ</li>'); //动态像ul的末尾追加一个新元素 }); </script>
方法 1: ライブを使用する
live() 関数は、1 つ以上のイベント ハンドラーを選択した要素にバインドし、これらのイベントの発生時に実行される関数を指定します。 live() 関数は、セレクターに一致する現在および将来の要素に適用されます。たとえば、スクリプトを通じて動的に作成される要素などです。実装は次のとおりです:
$('.liLabel').live('click', function(){ alert('OK'); });
方法 2: で使用する
on メソッドを使用してイベントをバインドでき、その親または本体にバインドできます。実装は次のとおりです。
$("#ulLabel").on('click','.liLabel',function(){ alert('OK') }); 或者: $("body").on('click','.liLabel',function(){ alert('OK') });