jquery - 为什么我的 jQuery 单击处理程序似乎对其某些目标运行多次？

Question

我申请:

$(".newContentLink").click(function() {
    $("#test").append("1");
});

关于这一点:

<span id="contents">
<input class="newContentLink" type="submit" style="width: 100%;" value="CREATE A NEW CONTENT"/>
<span id="content1" class="content study">
</span>
<input class="newContentLink" type="submit" style="width: 100%;" value="CREATE A NEW CONTENT"/>
<span id="content3" class="content study">
</span>
<input class="newContentLink" type="submit" style="width: 100%;" value="CREATE A NEW CONTENT"/>
<span id="content4" class="content category">
</span>
<input class="newContentLink" type="submit" style="width: 100%;" value="CREATE A NEW CONTENT"/>
</span>

怎么会呢当我点击前 2 个按钮时，它会添加 111，下一个按钮添加 11，最后一个加1？

Answer 1

无法复制。我怀疑你歪曲了——主要是过于简单化——你的情况。准确地说，我相信您正在动态添加这些输入，并每次调用 $(".newContentLink").click(...) — 这自然会不断应用附加的副本单击页面中每个 .newContentLink 的处理程序。

因此，您创建的最新输入包含一份点击处理程序副本并附加一个 1。第二个最新的有两个副本并附加 11。第三个有 3 并附加 111 等。

为了防止这种情况发生，请将点击处理程序应用于新创建的 DOM 元素，而不是 $(".newContentLink") (这始终意味着每个 .newContentLink )。