jquery - jquery 在这段代码中是如何操作 DOM 的？

Question

看下面的jquery代码：

var index = 0;
$(document).ready(
    $("p").on("click", function () {
        $("p").after($("<p>you have clicked "+(++index).toString()+" times on this text </p>"));
        $("p").first().remove();
        console.log(index);
    })
);

最初在 HTML 中只有一个p标签（没有别的），所以我希望用户第一次点击文本（初始段落文本）you have clicked 1 times on the text会出现，随后索引会增加，每次点击都会改变文本。但是在第一次点击时它不能以这种方式工作，它会p在 DOM 中放置一个标签（正如我在 chrome 检查元素中看到的那样），但之后它就不能工作了，为什么？

Answer 1

它不起作用，因为您没有使用.on()使用事件委托的签名。将其更改为此，它应该可以正常工作：

$(document).on("click", "p", function () {

您应该用document最接近p标签的容器替换任何静态容器。

查看jqFundamentals以获取有关事件委托的信息。

Answer 2

因为当事件被绑定时，页面上仍然不存在该元素..

当附加事件的脚本被执行时，页面上存在的元素将被赋予处理程序。

因此，当您第一次单击时，将执行该元素的单击事件，然后删除该事件绑定到的元素。现在单击p元素，该元素是稍后添加到DOM.

您需要委托活动

 $("body").on("click", "p" function () {

Answer 3

因为新的 DOM 元素没有第一个元素的 click 事件。

你需要$(document).on("click", "p", function () { });改用。

看到这个工作演示

Answer 4

只是为了补充所有其他专家所说的话......

这部分在文档加载时运行：

$("p").on("click" ...

当他们点击当时<p>存在的元素时，这部分就会运行：

    $("p").after($("<p>you have clicked "+(++index).toString()+" times on this text </p>"));
    $("p").first().remove();
    console.log(index);

但是您添加了新<p>元素并且它们没有点击侦听器。

其他答案显示了如何在 DOM 层次结构中添加点击处理函数。按照他们描述的方式去做。然后单击事件从它发生的地方“冒泡”，jQuery 确定它是否在<p>并运行处理程序函数。

另一种选择是给函数一个名字，并且每当你添加一个<p>然后添加一个点击监听器给它。因此，您将在函数内部引用该函数。

有人可能会评论哪个“更好”。在一种情况下，事件会像气泡一样流动，jQuery 必须遍历 DOM 来寻找<p>元素。另一方面，您不断地添加单击事件侦听器。

还有其他更好的方法可以做到这一点。（我喜欢将计数放在它自己的<span>元素中，并在每次点击时更改该文本。）

Answer 5

您需要使用事件委托。

$(document).on("click", "p", function () {