如何避免在對象上發生多次事件？

我永遠無法得到這個權利 - 如何避免一個對象上的多次出現。例如，我有這個功能，您可以點擊一個鏈接（轉到頂部），然後文檔將滾動到頂部。如何避免在對象上發生多次事件？

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

的問題是我有一個AJAX頁面被加載到同一個頁面，而AJAX頁面有另一個鏈接（去頂）一樣，所以我要再次附上scrollTop功能在ajax調用之後。

然後現有的鏈接（轉到頂部）將出現兩次，當我檢查警報時 - 我該如何解決它？

the scrolltop plugin。
the plugin加載一個ajax頁面。
the live example。

如果你點擊左側加載AJAX頁面，然後你去到文檔的底部點擊去頂初試縮略圖，然後就看到它提醒兩次或更多取決於你調用了多少次ajax頁面。

來源

2011-06-26 laukok

當您使用live時，您不必再附加處理程序。從documentation：

附加一個處理程序的情況下爲當前選擇，現在匹配所有元素，並在未來。

只需將

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

在你的主文件。

事件處理程序連接到DOM的根。它傾聽所有click事件。無論何時單擊與選擇器匹配的元素（a[href=#top]），都會執行該處理程序。

Here is a very simplistic example。您將看到$('div').live(...)僅被稱爲一次，但將爲以後添加的每個元素調用處理程序。

更新：

如何給人以「去頂」，在文章的鏈接不同的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; 
});

來源

2011-06-26 16:52:44

然後我必須在ajax調用之後再次附加這段代碼 - 我不認爲這是個好主意。我想將它變成一個函數或插件，以便我可以將它作爲處理程序附加。謝謝。 – laukok

@lauthiamkok：不，你不需要那樣做。這就是使用'live'的關鍵。你可以調用'$（...）。live（）'** once **，並且它會爲每個匹配選擇器的元素執行處理程序，不管它是否已經存在。您不必爲新創建的元素分配處理程序。我添加了一個例子。我希望它更清楚。你覺得太複雜了;） –

@felix：謝謝。我必須在ajax調用後更改'scrollTop'的值，所以我認爲這個代碼必須是動態的。也許我不應該使用'live'，而是'click'來代替？但'click'與'live'有相同的問題。 – laukok

之前安裝的功能選擇的「click」事件類型，使用解除綁定解除綁定以前的單擊事件。這裏是你如何解除綁定：

$(selector).unbind('click');

來源

2011-06-26 18:23:15 khattam

一個很好的解決方案！非常感謝！ – laukok

我在$.ajax函數上使用它在最後。在我的情況下，我使用500來延遲它，並停止重新發送很多次。

}).fail(function(response, status){ 
    alert("FAILED: "+JSON.stringify(response, null, 4)); 
},500);

我希望這可以幫助你！

來源

2014-11-12 12:38:46

如何避免在對象上發生多次事件？

回答

相關問題