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')
});

問題が解決したかどうかを試してみてください。この記事が役立つことを願っています。