Question

这个问题有点重复，但提供的答案并没有真正解决问题。以下是相关问题：

Why jQuery click doesn't work when included in a separate file

我有一个带有覆盖div的php模板我动态填充不同的内容，具体取决于点击的链接。例如，我在我的模板中有这个：

<a class="icon-search" href="#"></a>
<div id="overlay" class="hidden"></div>

在我的global.js文件中，我有以下功能：

$(document).ready(function(){
$("a.icon-search").click(function () {
$("#overlay").load("inc/search.php");
$("#overlay").toggleClass('show hidden');
});
$("#cancel").click(function() {
$("#overlay").toggleClass('show hidden');
});
});

取消按钮位于＆＃34; inc / search.php＆＃34;

当您点击＆＃34; icon-search＆＃34;时，叠加层会正确切换，并且search.php的内容会被加载，但按下取消按钮并不起作用，除非我将该功能移入search.php文件。我真的很讨厌这样做，因为它使得html变得非常混乱，并且它使重用事情变得困难。有没有办法克服这个问题，所以函数将适用于包含的元素？

Answer 1

您需要使用事件委派才能生成内容触发事件。

查找jQuery文档（http://api.jquery.com/on/）

中的.on（）方法

请改为尝试：

$(document).ready(function(){
    $("a.icon-search").click(function () {
       $("#overlay").load("inc/search.php");
       $("#overlay").toggleClass('show hidden');
    });

    $(document).on('click','#cancel',function() {
       $("#overlay").toggleClass('show hidden');
    });
});

使用.on（）会将文档上的单击事件委托给具有指定选择器的元素，这将适用于所有当前元素（运行此代码时位于DOM中）和 future元素（比如使用AJAX附加的元素，就像使用.load（）方法时那样）。

Answer 2

您正在使用的事件处理程序（我称之为静态事件处理程序）必须直接附加到它们正在处理事件的DOM对象上。这意味着当您运行代码以附加事件处理程序时，您要附加到的DOM对象必须已存在。

如果您在.ready()上运行此代码，但尚未加载动态加载的内容，则不会附加任何事件处理程序，因为还没有DOM对象将其附加到。

解决此类问题有两种常用方法：

在加载动态内容后运行代码（这是将脚本放入动态加载的PHP内容中的原因）。
切换到使用委托事件处理。在委派事件处理中，您将事件处理程序附加到动态内容的父级，该动态内容本身不是动态加载的，因此它已经存在。然后，当动态内容发生点击时，该点击将通过它的父母“冒泡”并遇到您拥有的点击处理程序。当使用.on()的委托形式时，jQuery会为您自动执行大量此操作，形式为$("#staticParent").on("click", "#dynamicChild", fn)。您可以在以下参考资料中阅读有关使用.on()的委派的详细信息：

Does jQuery.on() work for elements that are added after the event handler is created?

jQuery .live() vs .on() method for adding a click event after loading dynamic html

jQuery .on does not work but .live does

jQuery单击包含文件中的函数未触发

2 个答案: