javascript - 为什么 jQuery 无法在标记被替换后调用点击处理程序？

Question

发生的事情是，一旦您点击了图例，它的内容就会被一个新的图例所取代；但是当你点击它时，新的不会调用它的点击处理程序!

这是 js Fiddle 的链接:http://jsfiddle.net/CfkKk/2/

HTML:

<fieldset class="MyClass">
<legend class="MyClass">
     My Class (click on me)
</legend>
</fieldset>

CSS:

legend.MyClass:hover {
cursor: pointer;
color: blue;
}
legend.MyNewClass:hover {
cursor: pointer;
color: blue;
}

JS:

$('legend.MyClass').click(function() {
    var fieldset = $('fieldset.MyClass');
    var legend = fieldset.find('legend');
    var newLegend = "<legend class=\"MyNewClass\"" 
        + "<h3>My New Class (click on me again)</h3>"
        + "</legend>";
    legend.replaceWith(newLegend);
});

$('legend.MyNewClass').click(function() {
    alert('this is a new class');
});

Answer 1

对于初学者，当它应该在 .MyNewClass 上时，您正在调用 .MyNewDNS 上的点击功能

此外，当您添加点击功能时，元素 legend.MyNewClass 不存在，因此不会添加任何事件处理程序。

尝试像这样将一个函数委托(delegate)给父元素:

$('fieldset.MyClass').on("click", "legend.MyNewClass", function () {
    alert('this is a new class');
});