javascript - 基于 AJAX 的页面需要重复的 JavaScript 操作

Question

我正在开发一个使用 JQuery 布局并仅加载网站部分(如 Gmail)的应用程序。每次我使用 JQuery 加载“面板”时，我都必须替换一些链接以使其与面板一起使用(即，在面板中加载此链接内容，而不是在整个页面中)。是这样的吗:

function changeMainPane(href) {
    $("#screen").load(href);
    $("#screen a.ajax-page").click(function () {return
        changeMainPane($(this).attr("href"))
    });
}

这是一个非常简化的 changeMainPane 函数，我的有数十个 $("#screen ...").click() 调用来集成新的部分HTML 插入页面。

问题是:有没有更好的方法来做到这一点？像这样的东西:

$("#screen").ready(function() {
    // All my html setups
}

或者类似“用户总是点击链接，检查是否有ajax页面类并调用此函数”，而不必独立初始化每个链接。

Answer 1

您可以查看delegate方法。可以为要重新加载主面板的所有链接的公共(public)父元素注册委托(delegate)方法。它可以是 document 对象或较低级别的元素，例如 "body" 或另一个 div，例如 "div.mylinks"。

$(document).delegate("a.ajax-page", "click", function(){
    changeMainPane($(this).attr("href"))
})