新的內容不匹配

Question

我加載通過AJAX的一些內容，並嘗試添加一些功能， 我有這樣的代碼來顯示/隱藏一些內容：

$('.list li').hover(
      function() { $('.detail').show(); }, 
      function() { $('.detail').hide(); } 
     ); 

這部作品第一次加載罰款，但是在通過AJAX加載更多內容時不起作用。 任何想法如何解決它？

Answer 1

使用.on可以委派事件的.list元素，所以，添加新的元素li不會打破預期功能。

$(".list").on("mouseenter mouseleave", "li", function(e){ 
    $(".detail").toggle(e.type === "mouseenter"); 
}); 

小提琴：http://jsfiddle.net/NGEfj/

如果.detail元素是li內，而不是在自己的其他地方的頁面：

$(".list").on("mouseenter mouseleave", "li", function(e){ 
    $(".detail", this).toggle(e.type === "mouseenter"); 
}); 

小提琴：http://jsfiddle.net/NGEfj/1/

Answer 2

$('.list')僅構建當前存在的'.list'項目的列表。

您必須使用on將事件處理程序添加到尚未出現的元素。

你可以這樣做：

$('body').on('mousenter', '.list li', function({ $('.detail').show()}); 
$('body').on('mouseleave', '.list li', function({ $('.detail').hide()});