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

标签 javascript jquery ajax jquery-events

<分区>

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

我包含一个 .js 文件来设置 click 事件处理程序,它看起来像这样:

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”的绝对路径。

我的 anchor 标签是这样的:

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

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

最佳答案

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

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

关于javascript - 为 AJAX 加载的数据设置 jQuery 事件处理程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13822189/

相关文章:

javascript - ExtJS AJAX TabPanel 选项卡加载事件?

javascript - 如何在Node.js中解析JSON

javascript - jquery 在满足两个条件时执行函数

javascript - 使用javascript循环div

Javascript - 需要一个正则表达式来匹配美国附表 B (HTS) 编号。 "0000.00.0000"

javascript - jQuery .toggle(showOrHide) 不工作

ajax - Bootstrap 下拉项与 Ajax 源绑定(bind)

php - 如何使用 codeigniter 将用户从第 1 列添加到第 2 列?

javascript - 当用户在 this.emit (":ask",语音)之后没有向 Alexa 输入任何内容时,我该如何解释?

javascript - 如何在 Ace 编辑器中获取/应用更改增量?