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")
});

Answer 2

使用$('a.ajax').live('click', stuff here)只要碰巧添加了“ajax”类，就会处理所有链接。

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

2 个答案: