DOM在加载函数后没有响应jquery evers

Question

我有一个动态加载内容的简单页面.我使用jQuery加载函数将内容附加到div.加载函数从另一个文件加载内容.我遇到的问题是,在内容加载后,我构建的jQuery函数没有响应click事件.

为了证明它的工作原理,我包含内容,在DOM加载后它完美地工作.需要帮助.

Answer 1

当你做这样的事情:

$("selector").click(function() { ... });

...只有已经在DOM中的元素才会被选择器匹配并将其click事件连接起来; 如果您以后添加元素会选择匹配,它们将不会自动后-事实上迷上了.

您可以使用事件委派来使用delegate或(使用较新版本的jQuery)自动将它们连接起来on:

$("container_for_elements").delegate("selector", "click", function() { ... }));
$("container_for_elements").on("click", "selector", function() { ... }));

(注意,参数的顺序在两者之间略有不同.)

随着事件的代表团,到底发生了什么是jQuery的挂钩click上的容器,当点击冒泡的容器,它会检查事件发生,看看是否有任何元素在两者之间匹配选择的路径.如果是这样,它会触发处理程序,就像你将它连接到元素一样,即使它实际上是挂在容器上.

具体例子:

<div id="container">
    <span>One</span>
    <span>Two</span>
    <span>Three</span>
</div>

如果我们这样做:

$("#container").delegate("span", "click", function() {
    console.log($(this).text());
});

...然后单击其中一个跨度将显示其内容,如果我们这样做:

$("#container").append("<span>Four</span>");

...该跨度将自动处理,因为事件处理程序在容器上,然后在事件发生时检查选择器,因此我们稍后添加元素并不重要.