jQuery：如何将onclick事件添加到动态生成的div中？

Question

我想在使用以下代码生成的div中添加onclick事件：

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

我应该在html（）中编写onclick事件吗？

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

您可以delegate点击活动到#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