jQuery单击包含的文件中不触发的函数
这个问题有点重复，但提供的答案并不能真正解决这个问题。以下是相关的问题：
Why jQuery click doesn't work when included in a separate file
我有一个php模板，它有一个覆盖div，我正在动态地填充不同的内容，这取决于单击哪个链接。例如，我的模板中有这样的内容：
<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');
});
});取消按钮位于"inc/search.php“中。
当您单击“图标搜索”时，覆盖将正确切换，search.php的内容将被加载，但按下cancel按钮将无法工作，除非我将该函数移到search.php文件中。我真的不喜欢这样做，因为它使html变得非常混乱，并且使重用变得很困难。有没有办法解决这个问题，这样功能就可以处理包含的元素了吗？
回答 2
Stack Overflow用户
发布于 2014-05-31 20:09:34
您需要使用事件委托来生成内容触发事件。
在.on文档(http://api.jquery.com/on/)中查找jQuery ()方法
试一试：
$(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中)和未来元素(类似于使用AJAX追加的元素，比如使用.load()方法时)。
Stack Overflow用户
发布于 2014-05-31 20:09:56
您所使用的事件处理程序(我称之为静态事件处理程序)必须直接附加到它们处理事件的DOM对象。这意味着，当运行附加事件处理程序的代码时，要附加到的DOM对象必须已经存在。
如果您正在.ready()上运行此代码，但动态加载的内容尚未加载，则不会附加事件处理程序，因为还没有DOM对象将其附加到。
解决这类问题的一般方法有两种：
- 在加载了动态内容之后运行代码(这就是将脚本放入动态加载的PHP内容中的功能)。
- 切换到使用委托的事件处理。在委托事件处理中，可以将事件处理程序附加到动态内容的父级，该父程序本身没有动态加载，因此它已经存在。然后，当在动态内容上发生单击时，该单击将“冒泡”通过它的父母，并遇到您拥有的单击处理程序。jQuery在使用
.on()的委托形式(也就是这种形式的$("#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
https://stackoverflow.com/questions/23974187
复制相似问题
腾讯云开发者
