Question

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

为了证明它是有效的，我包含内容，在DOM加载后它完美地工作。需要帮助。

Answer 1

当你做这样的事情时：

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

...只有已经在DOM中的元素才会被选择器匹配并将其点击事件连接起来;如果您稍后添加将与选择器匹配的元素，则它们将不会在事后自动连接。

您可以使用事件委派来使用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>");

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

Answer 2

正如您在jQuery's documentation上看到的那样：

通常，当您使用$（＆＃39; a＆＃39;）点击（fn）向所有链接添加点击（或其他事件）处理程序时，您会发现事件在您使用AJAX请求将新内容加载到页面中之后不再有效。

当你调用$（＆＃39; a＆＃39;）时，它会在调用时返回页面上的所有链接，而.click（fn）只会将处理程序添加到这些元素中。添加新链接时，它们不会受到影响。有关更长时间的讨论，请参阅AJAX和事件教程。

您有两种处理方法：

使用事件委派

事件委托是一种利用事件冒泡来捕获DOM中任何位置的元素的事件的技术。

从jQuery 1.3开始，您可以使用live和die方法将事件委托与事件类型的子集一起使用。从jQuery 1.4开始，您可以使用这些方法（以及1.4.2中的delegate和undelegate）进行事件委派，几乎可以使用任何事件类型。

对于早期版本的jQuery，请查看Brandon Aaron的Live Query插件。您还可以通过绑定到公共容器并从那里侦听事件来手动处理事件委派。例如：

$('#mydiv').click(function(e){
    if( $(e.target).is('a') )
       fn.call(e.target,e);
});
$('#mydiv').load('my.html');

此示例将处理#mydiv中任何元素的点击，即使它们在添加点击处理程序时尚不存在。

使用事件重新绑定

此方法要求您在添加新元素时调用绑定方法。例如：

$('a').click(fn);
$('#mydiv').load('my.html',function(){
    $('#mydiv a').click(fn);
});

Answer 3

因为您在DOM完全加载后插入内容，所以必须使用.on("click",function(){})来实现点击功能，因为在绑定它们时它们在DOM中不可用！

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

3 个答案: