.on을 사용하여 동적으로 생성 된 콘텐츠에 바인딩

Question

일부 콘텐츠를 표시 할 때 무한 스크롤을 사용하고 있으며 일부 생성 된 항목에 일부 mouseenter/mouseleave 이벤트를 바인딩하는 데 문제가 있습니다.

페이지에 이미있는 컨테이너에 .on을 바인딩해야한다는 것을 알고 있지만 토글하는 현재 jQuery를 변경하는 구문을 파악하는 데 문제가 있습니다.

이것은 현재 JS입니다 :

$(document).ready(function() { 
    $('.grid-box .actions').hide(); 

    $('.grid-box').on({ 
     mouseenter: function() { 
      $(this).find('.actions').show(); 
     }, 
     mouseleave: function() { 
      $(this).find('.actions').hide(); 
     } 
    }); 

}); 

주요 컨테이너 # 그리드 컨테이너이며, 각 항목은 .grid 박스입니다. .grid-box를 입력/이탈 할 때 액션이 보이거나 숨겨 지도록하려면 어떻게해야합니까?

$('#grid-container').on('mouseenter mouseleave', '.grid-box', function(e) { 

// some action 

}); 

Answer 1

정확히이이 이벤트 위임라고하며는 선택에 따라 이벤트를 다음 최대 거품에 이벤트를 기다립니다 일치 :

나는 내가이의 라인을 따라 뭔가를 필요가 있다고 생각합니다. 요소의 수를 N 배로 등록하는 대신 하나의 처리기 만 등록하므로 훨씬 효율적입니다. 또한 동적 내용이 변경 될 때마다 바인딩하는 것이 아니라 한 번 바인딩하면됩니다.

$('#grid-container').on('mouseenter', '.grid-box', function(e) { 

    // some action 

}).on('mouseleave', '.grid-box', function(e) { 

    // some action 

}); 

Answer 2

두 번째 인수로 선택이 여전히 작동합니다

$('#grid-container').on({ ...}, '.grid-box'); 

http://jsfiddle.net/QkFTz/1/

또 다른 방법은 단지 개별적으로 결합하는 것입니다, 제가 개인적으로 생각하는이 명확 :

$("#grid-container").on('mouseenter', '.grid-box', function() {}) 
    .on('mouseleave', '.grid-box', 'function() {});