如何使这个点击实例只发生一次，并可访问的所有内容

How to make this click instance only happen once and be accessable by all content?

本文关键字：一次 访问 何使这 实例      更新时间：2023-09-26

我有一个脚本劫持所有链接与一定的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);
}

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

$(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']元素是否已经绑定了事件处理程序。

@jmarr抢先一步:p 

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