9

作为 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/testing.php" 的绝对路径。

我的锚标签如下所示：

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

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

4

2 回答 2

12

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

$(document).on('click', '.ajax', function(event){
    event.preventDefault();
    $('#content').load("cnt/" + pattern.exec(this.href.substr(baseurl.length)) + ".php")
});
于 2012-12-11T14:49:56.020 回答
1

using$('a.ajax').live('click', stuff here)将处理所有带有“ajax”类的链接，只要它们碰巧被添加。

于 2012-12-11T14:50:09.890 回答