イベントを動的要素にアタッチ

Question

動的に生成するイベントに要素を関連付ける際に問題があります。

for (var i = 0; i < array.length; i++) { 
itemlist=itemlist.concat('<pre'+' id="pres'+i+'"'+'>'+array[i]+'</pre>'); 

var name = '#pres'+i; 
$(name).click(function() { 
    alert("Handler for .click() called."); 
}); 
} 

私も、私は、スタックオーバーフローで見つかったこの方法を試してみましたがありませんが得られた：私は、イベントを添付するか、他の何かかどうかに使用してイムそのメソッドがいるかどうかわからない問題イムを解決する上の任意のアドバイスをいただければ幸いです結果：

var name = '#pres'+i; 
$(name).on('click', function() { 
    alert("Handler for .click() called."); 
}); 

クロム内のすべての要素を検査しながら、しかし、私が付属しているjQueryのイベントは、その警告を行わず、正しいIDで存在します。私はいくつかの解決法を見てきましたが、すべてのタグに同じ機能をつけたいのですが、同じイベントをループ内のそれぞれに付けることは受け入れられるでしょう。 " 任意の助けいただければ幸い:)

Answer 1

代わりに、コードは不より複雑になり、維持するために痛みをすることができユニークidの属性を生成するので、あなたの代わりに単一の共通クラスを使用して単一委任イベントハンドラをアタッチできすべての要素。これを試してみてください：

$('#myContainer').on('click', '.foo', function() { 
    // handle the element click here... 
    console.log($(this).text()); 
}); 

var html = ''; 
for (var i = 0; i < array.length; i++) { 
    html += '<pre class="foo">' + array[i] + '</pre>'; 
} 
$('#myContainer').append(html); 

Answer 2

ロリーMcCrossanの答えは、あなただけの先頭に要素を追加し、その後その.clickを設定した場合、それを行うための最も簡単な方法です。
しかし、それより遅い時点で生成関数を呼び出すと、作成時に各要素の.clickイベントハンドラを設定する関数のようなものを使用することをお勧めします。

あなたはIDなどを持っていても、本当に必要なわけではありません。

var itemlist=[] 
 
    var array=["Element 1","Element 2","Element 3"] 
 
    for (var i = 0; i < array.length; i++) { 
 
     element=$('<pre' + ' id="pres' + i + '"' + '>' + array[i] + '</pre>'); 
 
     $(element).click(function() { 
 
      alert("Handler for .click() called."); 
 
     }); 
 
     itemlist.push(element); 
 
    } 
 
    $("body").append(itemlist)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

あなたは、コード怒鳴るようなすべてのpreの要素が含まれていた容器内onメソッドを使用する必要があります。

は、あなたがこの結果を持っていると仮定します。

<div class="container-pre"> 
    <pre id="pres1" data-id="1" class="pre-element">Some text 1</pre> 
    <pre id="pres2" data-id="2" class="pre-element">Some text 2</pre> 
    <pre id="pres3" data-id="3" class="pre-element">Some text 3</pre> 
</div> 

その後、あなたのjQueryの設定がこれを希望：

$(document).ready(function() { 
    $(".container-pre").on("click", ".pre-element", function(e) { 
     var elem = $(e.currentTarget); 
     var id = elem.attr("data-id"); 
     alert("Handler for .click() called at element " + id); 
    }); 
}); 

あなたがアクションで、このコードでこのplunkerを見ることができます：

https://embed.plnkr.co/v61GxazfsT8RscuMTxI9/