테이블 셀 호버에서 jquery 이벤트 버블 링 처리

Question

jQuery에서 이벤트 버블 링을 시작 했으므로 이해가 매우 제한적입니다. 부모 컨테이너 수준에서 HTML 표 (그리드) 행/셀에서 발생하는 모든 이벤트를 처리해야한다는 요구 사항이 있습니다. 예 : 1. 사용자가 행을 클릭 할 때마다 부모에게 바인딩하는 각 클릭 이벤트에 바인딩하는 것이 좋습니다. 2. 사용자가 셀 위로 마우스를 가져 가면 툴팁을 표시하고 싶습니다. 즉, 셀의 텍스트 요소에 title 속성을 설정해야합니다. 이 이벤트도 거품이 필요해.

저는 제 요구 사항의 첫 부분을 해결할 수 있습니다. 1 부 (아래에 jsFiddle 추가) 코드는 다음과 같습니다.

$('#grid').click(function(evt) { 
    var row = $(evt.target).parent('tr'); // Get the parent row 
    var cell= $(evt.target); //Get the cell 
    alert('Row data: ' + row.text()); 
    alert('Cell data: ' + cell.text()); 
}); 

나는 호버도 구현하는 것이 간단 할 것이라고 생각했습니다. 그러나 나는 개별 세포 가치를 함정 수 없습니다. 여기에 필자의 샘플 코드가 있습니다. jsFiddle: sample code to bubble the event on cell hover

또한 나는 호버에 두 번 경고하는 것으로 나타났습니다. 나는 그것이 셀을 위해 그리고 나서 행/테이블을 위해 이벤트를 일으키고 있다고 생각한다. 확실하지 않다?

Answer 1

$.on 다음과 같이 수행 할 수 있습니다. jQuery 1.7에서 모든 전화는 .live(), .bind()이고 '.delegate()'는 .on()을 사용합니다. .on은 #grid에서만 이벤트를 바인딩하고 해당 요소에서 이벤트를 가로 채고 대상이 두 번째 선택기를 작동시키는 지 확인합니다. 그렇다면 함수를 실행하십시오.

$('#grid').on('mouseenter','td', function(){ 
     console.log($(this).text()); 
    });​ 

Working Fiddle