javascript – 为AJAX加载的数据设置一个jQuery事件处理程序

这个问题在这里已经有一个答案：> Event binding on dynamically created elements?18
对于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")
});

javascript – 为AJAX加载的数据设置一个jQuery事件处理程序

解决方法

猜你在找的Ajax相关文章