如何避免对象多次出现？

Question

我永远无法做到这一点 - 如何避免在对象上多次出现.例如,我有这个功能,你可以点击一个链接(转到顶部),然后文档将滚动到顶部.

this.scrollTop = function(){
    $('a[href=#top]').live('click',function(){
        alert('1');
        $('html, body').animate({scrollTop:0}, 'slow');
        return false;
    });
} 

问题是我有一个ajax页面要加载到同一页面,而ajax页面也有另一个链接(转到顶部),所以我必须scrollTop在ajax调用后再次附加该函数.

当我检查警报时,现有的链接(转到顶部)将出现两次 - 我该如何解决？

1. scrolltop插件.
2. 加载ajax页面的插件.
3. 实例.

如果单击左侧的第一个测试缩略图图像以加载ajax页面,则转到文档底部单击转到顶部,然后您看到它的警报两次或更多取决于您调用ajax页面的次数.

Answer 1

使用时live,您不必再附加处理程序.从文档:

现在和将来,为当前选择器匹配的所有元素附加事件处理程序.

只是放置

$('a[href=#top]').live('click',function(){
    $('html, body').animate({scrollTop:0}, 'slow');
    return false;
});

在你的主文件中.

事件处理程序附加到DOM的根目录.它听取所有click事件.只要单击与selector(a[href=#top])匹配的元素,就会执行处理程序.

这是一个非常简单的例子.您将看到$('div').live(...)只调用一次,但将为您稍后添加的每个元素调用处理程序.

更新:

如何给文章中的"go to top"链接一个不同的href？

$('a[href=#article]').live('click',function(){
    $('html, body').animate({scrollTop:100}, 'slow');
    return false;
});

并#top仅用于主要的一个.在这里你不必再使用live我想,你可以直接附加处理程序:

$('a[href=#top]').click(function(){
    $('html, body').animate({scrollTop:0}, 'slow');
    return false;
});