추가 행을 추가 한 후 jQuery live()를 사용하여 여러 이벤트를 모든 테이블 행에 바인딩하는 방법?

Question

live() 메서드를 사용하여 세 개의 이벤트를 하나의 선택기에 바인딩하려고하는데 작동하지 않는 것 같습니다.

가 여기에 지금까지 무엇을, 그리고 내가 추가로 테이블 행을 추가 할 때까지 작동 :

$("tr:has(td)").live('click',function(event){ 
     //do stuff 
}).live('mouseover',function(){ 
    $(this).toggleClass('highlight'); 
}).live('mouseout',function(){ 
    $(this).toggleClass('highlight'); 
}); 

내가 추가로 테이블 행을 추가 한 후에 만 ​​클릭 이벤트가 작동합니다. 테이블 행을 추가 한 후 세 가지 이벤트가 모두 작동하도록하려면 어떻게합니까?

Answer 1

예를 들어, 을 live().live().live()으로 이동하여 원하는 개체가 아닌 것을 추가하려고합니다. 이것은 jQuery가 연결을 처리하는 방법입니다. 당신이해야 할 일은

은 다음과 같습니다

var $o = $("tr:has(td)"); 
$o.live('click',function(event){ 
     //do stuff 
}); 
$o.live('mouseover',function(){ 
    $(this).toggleClass('highlight'); 
}); 
$o.live('mouseout',function(){ 
    $(this).toggleClass('highlight'); 
}); 

Here is an article on chaining

Answer 2

난 당신이 $("tr:has(td)").live() 세 번을 할 생각 - 당신이 그것을 체인 수 없습니다. 대신 훨씬 더 우아한 이벤트 위임을 사용할 수 있습니다 live()를 사용

Answer 3

:

$('table').hover(function(e) { 
    $(e.target).closest('tr').addClass('highlight'); 
}, function(e) { 
    $(e.target).closest('tr').removeClass('highlight'); 
})