.hover事件不適用於頁面加載後動態加載的元素

Question

我對通過jQuery動態加載的一組div s有以下事件處理函數。

$(document).ready(function() { 
    $('.one span').hover(function() { 
     $(this).animate({ backgroundColor: '#666666', color: '#DDDDDD', marginRight: 5 }, 250); 
    }, function() { 
     $(this).animate({ backgroundColor: '#DDDDDD', color: '#666666', marginRight: 0 }, 250); 
    }); 
}); 

的問題是，這些事件處理程序不被解僱，我懷疑這可能是因爲$('.one span')通過jQuery的頁面加載後，這些元素被加載。

在這種情況下我該怎麼辦？我怎麼能對後來會出現的元素進行某種「後期綁定」？

Answer 1

而不是$('.one span').hover(使用委託事件，因爲它被動態添加到DOM。見下文，

$(document).on('mouseenter', '.one span', function() { 
    $(this).animate({ backgroundColor: '#666666', color: '#DDDDDD', marginRight: 5 }, 250); 
}).on('mouseleave', '.one span', function() { 
    $(this).animate({ backgroundColor: '#DDDDDD', color: '#666666', marginRight: 0 }, 250); 
}); 

更換document與執行上面的腳本時存在最接近的容器。