0

我有一个脚本可以劫持所有带有特定 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);

}
4

2 回答 2

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']元素已经/没有绑定到它们的事件处理程序。

于 2013-04-01T20:18:42.793 回答
1

@jmarr 打败了我:P

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

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

});
于 2013-04-01T20:19:38.187 回答