Javascript 为什么一旦替换了标记，jQuery就无法调用click处理程序？

一旦你点击图例，它的内容就会被一个新的图例替换；但是，当你点击它时，新的一个不会调用它的点击处理程序

以下是js Fiddle的链接：

HTML:

JS:

$（'legend.MyClass'）。单击（函数（）{
var fieldset=$（'fieldset.MyClass'）；
var legend=fieldset.find（'legend'）；
var newLegend=“问题在于，在替换图例存在于DOM树中之前，将其连接到替换图例上。
因此，jQuery选择器的计算长度为0，即nothing，因此不附加事件处理程序

以下方面应起作用：

$('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.MyNewDNS').click(function() {
        alert('this is a new class');
    });
});

$（'legend.MyClass'）。单击（函数（）{
var fieldset=$（'fieldset.MyClass'）；
var legend=fieldset.find（'legend'）；
var newLegend=“对于初学者，您正在调用
.MyNewDNS
上的click函数，该函数应在
.MyNewClass

此外，当您添加单击函数时，元素
legend.MyNewClass
不存在，因此不会添加事件处理程序

尝试将函数委托给父元素，如下所示：

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

jquery
.delegate（）
已被弃用。开发人员应使用
.on（）
进行委托。
$('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');
});

$('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.MyNewDNS').click(function() {
        alert('this is a new class');
    });
});

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