수정 된 DOM에서 테이블 셀에 대해 Jquery 이벤트가 트리거되지 않음

Question

많은 행과 셀이있는 빈 테이블을 채우는 간단한 Jquery 스크립트가 있습니다.

체크 박스의 상태에 따라 새로 채워진 테이블의 모든 셀에 대해 CSS 클래스를 토글합니다 (페이지로드시에는 아니지만 양식 제출시 JS 기능에 의해 동적으로 작성됨).

테이블 셀에 "클릭"이벤트를 설정할 수 있으며 정상적으로 작동합니다.

그러나 on()을 사용하여 hover() 이벤트에 함수를 바인딩하려는 시도가 성공하지 못했습니다. 이벤트가 트리거되지 않고 콘솔 로그 메시지가 생성되지 않습니다. 내가 뭘 잘못하고 있는지에 대한 아이디어가 있습니까? 동적으로 테이블에 행을 삽입하는 경우의 바인딩이 발생 후 존재로 오는 TDS에 바인더 제본 경우

$("#resultTable").click(function(e){ // This function works fine. 
     $(e.target).closest('td').toggleClass('stay'); 
    }); 

$("#resultTable td").on("hover", //Same problem for a simpler 'mouseover' 
    function(event){ 
     console.log("MOUSE OVER"); //Never appears 
     $(this).toggleClass('over'); 
    }, 
    function(event){ 
     console.log("MOUSE OUT"); //Never appears 
     $(this).toggleClass('over'); 
    } 
    ); 

Answer 1

는 .on 작동하지 않습니다. 문서에서 .on에 대한 호출이 이루어지면 바인딩이 발생할 때 이벤트가 바인딩되는 요소가 DOM에 존재해야합니다.

이벤트 처리기는 현재 선택된 요소에만 바인딩됩니다. 코드가 .on()을 호출 할 때 페이지에 존재해야합니다. 당신이 동적으로 다음 조금 더 빨리 대표단을 만들기 위해 #resultTable에 이벤트를 첨부 할 수 있습니다 행을 추가하는 경우

이

$j(document).on("hover", "#resultTable td", 
    function(event){ 
     console.log("MOUSE OVER"); //Never appears 
     $(this).toggleClass('over'); 
    }, 
    function(event){ 
     console.log("MOUSE OUT"); //Never appears 
     $(this).toggleClass('over'); 
    } 
    ); 

를 작동 할 수 있습니다.

Answer 2

는 delegate는 on

$("#resultTable").delegate("td","mouseover", function(event){ 
     console.log("MOUSE OVER"); //Never appears 
     $(this).addClass('over'); 
    }); 

$("#resultTable").delegate("td","mouseout",function(event){ 
     console.log("MOUSE OUT"); //Never appears 
     $(this).removeClass('over'); 
    });