动态创建的div不可点击

Question

无法使用可点击的类动态创建div：

HTML：

<div id="line1">
    <div class='clickMe'>old clickable text</div>
</div>

<div id="line2">
    <div class='dontClickMe'>old unclickable text</div>
</div>

<div id='button'>button</div>

使用Javascript：

$('.clickMe').click(function() {
    alert("foo");
});

$('#button').click(function() {
    $('#line2').html("<div class='clickMe'>new clickable text</div>");
});

单击该按钮将替换line2中的代码。它在调试工具中看起来很好，即Chrome dev元素。

但第2行中的“新可点击文字”无法点击。

Answer 1

使用delegate或live。动态添加div s不会绑定处理程序，除非您明确地将新处理程序绑定到它们。

Answer 2

使用.delegate（）

var body = $("body");
body.delegate('.clickMe', 'click', function() {
    alert("foo");
});