如何使这个点击实例只发生一次并且所有内容都可以访问？

Question

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

这是我试图用来劫持链接的 sn-p。

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

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

});

这是我的 priFrame 的 sn-p，所以你知道我是如何尝试加载数据的。

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

这是一个很好的事件委托案例。试试这个（注意：这个脚本应该在整个页面中包含一次，而不是为每个动态导航到的页面包含一次）：

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

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

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

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

事件委托有效，因为点击处理程序只绑定到document 一次。每当click 事件发生时，我们只需确保该事件源自a[rel='linkMain'] 元素，然后触发处理程序。这使我们能够从页面中动态添加/删除元素，而不必一直点击哪些a[rel='linkMain'] 元素已经/没有绑定到它们的事件处理程序。

Answer 2

@jmarr 打败了我：P

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

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

});