jQuery - on() проблема с динамически добавленными элементами

Question

У меня есть страница, которая восстанавливает данные из json и генерирует список продуктов. Пользователь может переключаться между двумя разными стилями при нажатии кнопки, которая изменяет родительский ul на ul.fullview. При просмотре продуктов с использованием ul.fullview продукты, получившие класс. Highlight, должны отображаться с большим уменьшенным изображением, в то время как другие продукты получают абсолютное положение, чтобы вписаться в макет. Все это делается с помощью CSS и простого tooggleClass(). Проблема заключается в событии mouseenter/mouseleave в этих двух разных представлениях. При просмотре с использованием представления по умолчанию все продукты должны иметь одинаковую анимацию. Когда родительский ul является .fullview, продукты .highlighted должны иметь другую анимацию. Поскольку я работаю с динамически добавленными элементами, мне пришлось использовать .on() вместо .hover(). Как я могу заставить эти селекторы работать с .on()?

$('div.products ul:not(.fullview) li:not(.highlighted)').hover(
    function() { 
    $(this).find($('div.tooltip')).show(); 
    $(this).find($('div.fb-like')).fadeIn(150); 
    }, 
    function() { 
    $(this).find($('div.tooltip')).fadeOut(150); 
    $(this).find($('div.fb-like')).fadeOut(150); 
    } 
); 

$('li.highlighted').hover(
    function() { 
    $(this).find($('div.description')).show(); 
    $(this).find($('div.fb-like')).fadeIn(150); 
    }, 
    function() { 
    $(this).find($('div.description')).fadeOut(150); 
    $(this).find($('div.fb-like')).fadeOut(150); 
    } 
); 

Код выше должен работать, если элементы не были добавлены javascript. Я был в состоянии сделать работу по умолчанию вида с ниже сценарием:

$('div.products ul').on({ 
    mouseenter: function() { 
    $(this).find($('div.tooltip')).show(); 
    $(this).find($('div.fb-like')).fadeIn(150); 
    }, 
    mouseleave: function() { 
    $(this).find($('div.tooltip')).fadeOut(150); 
    $(this).find($('div.fb-like')).fadeOut(150); 
    } 
}, 'li'); 

Но когда я добавляю эти строки, он останавливает загрузку данных JSon:

$('div.products ul.fullview').on({ 
    mouseenter: function() { 
    $(this).find($('div.description')).show(); 
    $(this).find($('div.fb-like')).fadeIn(150); 
    }, 

    mouseleave: function() { 
    $(this).find($('div.description')).fadeOut(150); 
    $(this).find($('div.fb-like')).fadeOut(150); 
    } 
}, 'li.highlighted'); 

Что я делаю неправильно?

Answer 1

Вы говорите:

меняет родительскую ул к ul.fullview

Я предположил бы, что делает ul.fullview динамичным, как в момент его связывания просто ul без «fullview ', но затем динамически изменился, чтобы иметь класс.

Попробуйте это:

$('div.products').on({ 
    mouseenter: function() { 
     $(this).find($('div.description')).show(); 
     $(this).find($('div.facebook-like')).fadeIn(150); 
    }, 

    mouseleave: function() { 
     $(this).find($('div.description')).fadeOut(150); 
     $(this).find($('div.fb-like')).fadeOut(150); 
    } 
}, 'ul.fullview li.highlighted');​ 

Answer 2

Я объединил два ответы на JSFiddle для вашего удобства. Скобки и селектора были скорректированы в соответствии с другими ответами.