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

对于初学者，当.MyNewDNS上的点击功能显示在.MyNewClass

时

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

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

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

Answer 2

问题是您在替换图例中将事件挂钩在DOM树中。因此，jQuery选择器的长度为0，即没有任何值，因此不附加事件处理程序。

以下内容应该有效：

$('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');
    });
});

为什么更换标签后jQuery无法调用click处理程序？

2 个答案: