Question

<ul>
<li>A</li>
</ul>

$("li").click(function(){
    console.log("Hello");
});

$("ul").on("click", "li", function(){
   console.log("Hello");
});

$("ul").append('<li>B</li>');

大家好，当我按下＆＃34; A＆＃34;时，我在控制台中有2＆＃34; Hello＆＃34; -logs，当我按下＆＃34; B＆＃34;时，它只有一个＆＃34; ＃34; Hello＆＃34;，来自UL事件处理程序。

有人可以解释这种行为吗？

谢谢。

Answer 1

这是因为您附加的B <li>没有附加到它的onclick事件处理程序，因为它在您执行时不存在于DOM中：

$("li").click(function(){
    console.log("Hello");
});

您需要使用B li单独注册一个onclick事件处理程序（对不起，这是一个非常糟糕的例子）：

$b = $('<li/>')
$b.text('B')
$b.click(function(){ console.log("Hello"); })
$("ul").append($b);

Answer 2

＆＃34; li＆＃34;上的第一个点击事件处理程序标签在A上按预期工作，因为在创建处理程序时存在A。它不适用于B，因为在创建处理程序时B不存在。

＆＃34; ul＆＃34;上的第二个点击事件处理程序标签也通过它的父母点击A点击。此外，它还可以捕获B上的点击，因为＆＃34; on＆＃34; method能够跟踪您在参数中指定的动态子项。

事件处理程序不起作用

2 个答案: