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

Question

作为jQuery和AJAX基础知识的新手,我一直在尝试设置一些相当简单的动态加载.

我包含一个设置click事件处理程序的.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/testing.php"的绝对路径.

我的锚标签看起来像这样:

<a href="testing/" class="ajax">Link to testing page</a>

我的问题是,无论何时将新内容加载到div#content中,我的.js文件中的处理程序都不会注册任何可能使用AJAX出现的链接.换句话说,链接将简单地充当普通的锚标签.我希望它使用AJAX加载下一页,就像它与第一页一样.

Answer 1

如果要插入新内容,则该内容将是动态的,并且事件处理程序只能绑定到实际存在的元素.您需要将事件委托给在附加事件处理程序时存在的DOM中更高的元素.我将使用该文档,您将使用最接近的非动态父代表委托:

$(document).on('click', '.ajax', function(event){
    event.preventDefault();
    $('#content').load("cnt/" + pattern.exec(this.href.substr(baseurl.length)) + ".php")
});