jQuery：動的生成divにonlickイベントを追加する方法は？

Question

私はfolowingコードを使用して生成されたdiv要素にonclickのイベントを追加したい：

$("<div />").attr("city", $(this).attr("city")) 
      .attr("state", $(this).attr("state")) 
      .html($(this).attr("city") + ',' + $(this).attr("state")) 
      .appendTo($('#cityList')); 

は私が）（HTMLでonlickイベントを書くべきですか？

Answer 1

divの作成と残りのコードの連鎖を分割してみませんか？たとえば、

var elem = $('<div />'); 
elem.click(function() { 
    // Click handler 
}); 

elem.attr("city", $(this).attr("city")) 
    .attr("state", $(this).attr("state")) 
    .html($(this).attr("city") + ',' + $(this).attr("state")) 
    .appendTo($('#cityList')); 

Answer 2

.live（）関数を使用することをおすすめします。この関数を使用すると、あとで動的に追加される要素にイベントをバインドすることができます。

http://api.jquery.com/live/

Answer 3

あなたは#cityList

$("#cityList").delegate("div","click",function(e){  
//handler code here 
}); 

http://jsfiddle.net/bXtEz/

Answer 4

$('#cityList div').live('click', function(){ 
    ...do stuff; 
}); 

jQuery Live Link