동적으로 추가 된 요소에 대한 jQuery-on() 문제

Question

json에서 데이터를 복구하고 제품 목록을 생성하는 페이지가 있습니다. 상위 ul을 ul.fullview로 변경하는 단추를 클릭하면 사용자가 두 가지 스타일을 전환 할 수 있습니다. ul.fullview를 사용하여 제품을 탐색 할 때 .highlighted 클래스를받은 제품은 더 큰 축소판으로 표시되어야하고 다른 제품은 레이아웃에 맞는 절대 위치를 수신해야합니다. 이것은 CSS와 간단한 toggleClass()에 의해 모두 수행됩니다. 문제는 두 가지 다른보기 내에서 mouseenter/mouseleave 이벤트에 있습니다. 기본보기를 사용하여 탐색 할 때 모든 제품에는 동일한 애니메이션이 있어야합니다. 부모 ul이 .fullview 인 경우 강조 표시된 제품에는 다른 애니메이션이 있어야합니다. 동적으로 추가 된 요소로 작업 중이므로 .hover() 대신 .on()을 사용해야했습니다. 이러한 선택기를 .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); 
    } 
); 

위의 코드는 요소가 자바 스크립트로 추가되지 않은 경우 작동합니다. 나는 아래의 스크립트를 기본보기 작업을 할 수 있었다 :

$('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하는 부모 UL 변경 '클래스로 변경되었지만 동적으로 클래스가 변경되었습니다.

이 시도 :

$('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에 두 개의 답을 결합했다. 괄호와 선택자는 다른 사람의 대답에 따라 조정되었습니다.