javascript - 如何使此点击实例仅发生一次并可供所有内容访问？

Question

我有一个脚本，可以劫持带有特定 REL 标记的所有链接，它将更新我网站 JS 版本的主要内容区域。问题是，当我将其放在自己的 JS 文件中时，内容框架 (div) 中加载的页面将不会执行代码，即使它具有匹配的 REL。我将脚本附加到这些页面中，并且发生了一个错误，该错误将使该脚本执行与发现该脚本一样多的次数。因此，如果我浏览了 3 页的内容，链接点击将执行 3 次。 5 页相当于 5 次执行。花了半天时间，我真的很想知道我可以做得更好。

这是我尝试用来劫持链接的片段。

$("a[rel='linkMain']").click(function() {

    var link = $(this).attr("href");
    priFrame(link, 'main', 'true');
    return false;

});

这是我的 priFrame 的片段，以便您了解我如何尝试加载数据。

function priFrame(page, frame){

        $('#'+frame+'frame').load('/'+page).hide(0).scrollTop(0).fadeIn(1000);
        $("html, body").animate({ scrollTop: 0 }, 600);
        window.history.pushState(null, page, page);

}

Answer 1

这是事件委托(delegate)的一个很好的例子。请尝试此操作(注意:此脚本应为整个页面包含一次，而不是为动态导航到的每个页面包含一次):

$(document).on("click", "a[rel='linkMain']", function() {
    var link = $(this).attr("href");
    priFrame(link, 'main', 'true');
    return false;
});

您之前看到的行为的原因如下:

当您仅在页面上放置一次脚本时，它会将点击处理程序绑定(bind)到页面上已存在的所有 a[rel='linkMain'] 元素。然而，一旦您动态地将新的 a[rel='linkMain'] 元素引入页面，这些新元素也不会被绑定(bind)。

当您将代码放入动态加载的每个页面时，您将新的处理程序绑定(bind)到之前已经绑定(bind)了点击事件处理程序的 a[rel='linkMain'] 元素。

事件委托(delegate)之所以有效，是因为点击处理程序仅与文档绑定(bind)一次。每当发生 click 事件时，我们只需确保该事件源自 a[rel='linkMain'] 元素，然后触发处理程序。这使我们能够动态地从页面添加/删除元素，而无需不断点击哪些 a[rel='linkMain'] 元素已绑定(bind)/未绑定(bind)事件处理程序。