1

发生的情况是，一旦您单击图例，其内容就会被新图例替换；但是当你点击它时，新的不会调用它的点击处理程序！

这是 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');
});
4

2 回答 2

2

对于初学者，您在.MyNewDNS应该打开的时候调用 click 函数.MyNewClass

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

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

$('fieldset.MyClass').on("click", "legend.MyNewClass", function () {
    alert('this is a new class');
});
于 2013-07-28T21:31:38.593 回答
0

问题是在替换图例存在于 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');
    });
});
于 2013-07-28T21:27:54.827 回答