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时会出现，然后索引会出现增加，每次点击都会更改文字。但是它在第一次点击时不会以这种方式工作，它会在DOM中放置一个p标记（正如我在chrome检查元素中看到的那样）但是在为什么之后它不起作用？

Answer 1

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

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

您应该将document替换为与p标记最接近的容器的静态容器。

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

Answer 2

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

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

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

您需要委派活动

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

Answer 3

您需要使用事件委派。

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

Answer 4

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

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

<强> See this working demo

Answer 5

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

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

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

此部分在他们点击当时存在的元素时运行：

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

但是您添加了新的元素，并且没有点击侦听器。

其他答案显示了如何在DOM层次结构的上方添加点击处理函数。按照他们描述的方式去做。然后点击事件从它发生的地方“起泡”，jQuery会在上找出它并运行处理函数。

另一个替代方法是为函数命名，并且每当您添加时，都会向其添加一个单击侦听器。所以你将引用函数内部的函数。

有人可能评论哪个“更好”。在一个，事件围绕bubbline和jQuery必须遍历DOM寻找元素。另一方面，你一遍又一遍地添加点击事件监听器。

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

在这段代码中如何通过jquery操作DOM？

5 个答案: