如何綁定到JavaScript事件的DOM改變

Question

我有一個綁定到一個tr標籤來提供這樣的鼠標懸停效果的功能後：（」網格TR‘）。

$綁定（’的mouseenter 「， function（）{ $（this）.addClass（」hover「）; }）。bind（」mouseleave「，function（）{ $（this）.removeClass（」hover「）;}）;

問題是網格通過ajax加載時發生分頁或過濾等。這導致網格被完全替換，所有的事件綁定失敗。有沒有辦法綁定到一個事件，即使在DOM發生變化時也會自動附加到匹配元素上？

謝謝！

Answer 1

$.live是你想要什麼：

$(".grid tr").live("mouseenter", function() { $(this).addClass("hover"); }).bind("mouseleave", function() { $(this).removeClass("hover"); }); 

Answer 2

或者，你可以使用$.delegate

更多信息：what is the best practice of binding jQuery click event to each anchor tag on every row of a table

Answer 3

請使用.on()從現在開始，爲.live()在jQuery的棄用，因爲它效率低下。

$(".grid tr") 
    .on("mouseenter", function() { $(this).addClass("hover"); }) 
    .on("mouseleave", function() { $(this).removeClass("hover"); });