javascript - より多くの要素がこのクラスを持っている場合、.click関数はクラスに対して機能しません

Question

これは正常に機能します。

$('.classname').click(function() {
  alert('');
});
<div class="classname">Click me!</div>

しかし、これはしません：

$('.classname').click(function() {
  alert('');
});
<div class="classname">Click me!</div>
<div class="classname">Click me!</div>

どうすればこれを修正できますか？ご協力いただきありがとうございます！（タグ内のスクリプト、および.clickはドキュメントレディ関数内にあります）

score 2 · Accepted Answer

これを試してみてください：

$('PARENTNODE').on('click', '.classname', function() {
  alert('');
});
<div class="classname">Click me!</div>
<div class="classname">Click me!</div>

クリックハンドラーがアタッチされた後、要素が追加されます。.on（）を使用すると、将来の要素に対しても.on（）を有効にできます。

PARENTNODEを委任先の親（例：body）に置き換えます

score 0 · Accepted Answer

これを試して

$(document).ready(function(){
    $(document).on('click', '.classname', function() {
      alert('');
    });
});

http://api.jquery.com/on/を参照してください

score 0 · Accepted Answer

.clickが呼び出された時点で存在しない要素をターゲットにしようとしています。

jqueryコード全体を$（function（）{ここにあるコード}）;の間にラップすることができます。または、2つの<div>の後にJavaScriptを移動します。

score 0 · Accepted Answer

最初のdivを除くすべてのdivが動的に追加されると想定しています。

イベント委任アプローチを使用します。

$(function(){
    $(document).on('click', '.classname', function() {
        alert('');
    });
}),

4 に答える 4