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

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

为了certificate它是有效的,我包含了内容,在DOM加载后它完美地运行。 需要帮助。

当你做这样的事情时:

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

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

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

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

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

使用事件委托,真正发生的是jQuery挂钩click 容器 ,当点击冒泡到容器时,它会检查事件所用的路径,以查看中间的任何元素是否与选择器匹配。 如果是这样,它会触发处理程序,就像你将它挂钩到元素一样,即使它实际上是挂在容器上。

具体例子:

 
One Two Three

如果我们这样做:

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

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

 $("#container").append("Four"); 

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

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

通常,当您使用$(’a’)向所有链接添加点击(或其他事件)处理程序时。单击(fn),您会发现在将新内容加载到某个链接后,事件不再有效使用AJAX请求的页面。

当你调用$(’a’)时,它会在调用时返回页面上的所有链接,而.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); }); 

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