DOM 在加载函数后不响应 jquery

Question

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

为了证明它可以正常工作，我包含了内容，并且在 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 容器，当单击冒泡到容器时，它会检查事件所采取的路径，以查看是否有任何元素- Between 匹配选择器。如果是这样，它会触发处理程序，就像您将其挂接到元素上一样，即使它实际上挂在容器上。

具体示例：

<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>");

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

Answer 2

正如您在 jQuery 文档 中看到的：

通常，当您添加点击（或其他事件）使用 $('a').click(fn) 处理所有链接，您会发现事件在之后不再起作用您已使用 AJAX 请求将新内容加载到页面中。

当您调用 $('a') 时，它会返回调用时页面上的所有链接，并且 .click(fn) 仅将处理程序添加到这些元素。添加新链接时，它们不受影响。有关更长的讨论，请参阅 AJAX 和事件教程。

有两种方法可以处理此问题：

使用事件委托

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

从 jQuery 1.3 开始，您可以使用 live 和 die 方法对事件类型的子集进行事件委托。从 jQuery 1.4 开始，您可以使用这些方法（以及从 1.4.2 开始的委托和取消委托）对几乎任何事件类型进行事件委托。

对于早期版本的 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 中不可用！