这个问题在这里已经有一个答案：>
Event binding on dynamically created elements?18
对于jQuery和AJAX基础知识来说,我一直在尝试设置一些相当简单的动态加载.
对于jQuery和AJAX基础知识来说,我一直在尝试设置一些相当简单的动态加载.
我添加一个.js文件设置点击事件处理程序,它看起来像这样：
var baseurl = document.getElementById("baseurl").getAttribute("href");
var pattern = new RegExp("[^/]+");
var page = "cnt/" + pattern.exec(window.location.href.substr(baseurl.length)) + ".PHP";
$(document).ready(function(){
$('a.ajax').bind('click',function(event){
event.preventDefault();
$('#content').load("cnt/" + pattern.exec(this.href.substr(baseurl.length)) + ".PHP")
})
});
请注意,我对文件做了一些修改,所以相对的href“testing /”将变成文件“cnt / test.PHP”的绝对路径.
我的锚标签如下所示：
<a href="testing/" class="ajax">Link to testing page</a>
我的问题是,当新内容加载到div#内容时,我的.js文件中的处理程序没有注册可能使用AJAX出现的任何链接.
换句话说,链接将简单地作为普通的锚标签.我希望它使用AJAX加载下一页,就像第一页一样.
解决方法
如果您正在插入新内容,该内容将是动态的,并且事件处理程序只能绑定到实际存在的元素.您需要将事件委托给在附加事件处理程序时存在的DOM中的元素.我将使用该文档,您将使用最近的非动态父代理委托：
$(document).on('click','.ajax',function(event){
event.preventDefault();
$('#content').load("cnt/" + pattern.exec(this.href.substr(baseurl.length)) + ".PHP")
});