нового содержание не соответствует

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"); 
}); 

Fiddle: http://jsfiddle.net/NGEfj/

Если .detail элемент находится в li, а не по своей собственной где-нибудь еще на странице:

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

Fiddle: 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()});