html 테이블/양식의 변경 사항을 추적하십시오.

Question

내가 달성하고자하는 것은 <table> 요소 내에서 변경 사항을 추적하는 것입니다 (예 : 사용자 입력, 필드 추가 등). 등 난 그냥 그 모든 내 "변화"-listener을 첨부 할 수 물론

, 필드를 편집 행을 추가, 필드를 추가, <select> -elements의 필드 행을 선택 뭔가를 제거 할 수 있습니다 내 특정 시나리오 사용자에 나는 더 나은 방법이 있어야한다고 생각합니다.

나는 그것에 $('#myTable tbody').change() -listener를 부착했지만, 그 발생하지 않습니다 ...

은 아마 당신의 일부는 모든 가능한 사용자 액션에 가입 할 필요없이 테이블 변경 내용을 추적 할 수있는 방법을 알고 수동으로?

Answer 1

내 자신의 질문에 대답하기 위해 모든 이벤트를 위해 그것을 할 수

을

$('#myTable tbody').on('focusout', 'input, select, checkbox', myListener);

Answer 2

편집 : jQuery 1.4 이상은 실제로 설명한 동작을 지원해야합니다. 나는 나머지 부분을 참고 용으로 남겨 둘 것이다.

변경할 수있는 모든 요소에 이벤트를 추가 할 수 있습니다. 변경 될 수있는 요소는 해고 된 위치이기 때문입니다. 그러나, 당신은 수동으로 할 필요가 없습니다 :

$('#myTable input, #myTable select, ...).change(...) 

만약, 당신이 말한대로, 나중에 추가 요소가, 당신은 당신이 요소에 이벤트 리스너를 결합 할 수 있습니다 .live 방법을 조사 할 수 있습니다 나중에 만들어 질 것입니다.

Answer 3

당신은 Jquery liveQuery Plugin

아래는 마우스 오버, 마우스 아웃에 대한 예입니다 사용할 수 있습니다.

지금은 이런 변화를 듣고 : 나는 @mdsl 제안 좀처럼 그 일을 결정

: 당신은 마찬가지로

$('table') 
    .livequery(function(){ 
    // use the helper function hover to bind a mouseover and mouseout event 
     $(this) 
      .hover(function() { 
       $(this).addClass('hover'); 
      }, function() { 
       $(this).removeClass('hover'); 
      }); 
    }, function() { 
     // unbind the mouseover and mouseout events 
     $(this) 
      .unbind('mouseover') 
      .unbind('mouseout'); 
    });