부분 데이터 업데이트 후 .click() 함수 유지

Question

좌표계에 테이블을 사용하고 각 td 요소에 함수를 사용하여 필드 값을 업데이트합니다. 나는 빈 요소를 클릭하면

[ ][ ][X][ ] 
[ ][X][X][X] 
[X][ ][ ][ ] 

, 나는 다시 다음 내 레일 애플 리케이션에서 새로운 부분 데이터를 가져 오는 (과 함께 GET-변수를 전송)에 의해, 내 데이터베이스에서 값을 "X"를 설정하고자하고, - 테이블을 렌더링합니다. 이것은 단 한번만 내 레일 앱을 사용하여 잘 작동합니다. .click()은 jQuery 함수가 한 번만 실행되는 것처럼 보입니다. 이 기능은 다음과 같습니다 (통해 생성 을 커피 스크립트.)이 잘 실행됩니다

$(document).ready(function() { 
    $(".field").click(function(e) { 
    $.get("http://localhost/dinners?ap="+$(this).attr('id'), function(data) { 
     $("#dinner_table").html(data); 
    }); 
    }); 
}); 

을, 나는 요소를 클릭하면, 그 테이블에 새로운 데이터를 렌더링 - 한 번만하지만! 함수에서 HTML을 바꾼 후에 .click() 함수를 재정의하면 두 번 클릭 (및 업데이트) 할 수 있습니다.

저는 이것이 기본적인 질문이지만 지금까지의 검색.

Answer 1

이벤트을 위임하십시오. 이렇게하면 처리기를 한 번만 연결해야합니다.

$(".field").click(function(e) { 

이 될 것입니다 :

$("body").on('click', '.field', function(e) { 

body는 정적 부모 컨테이너로 대체 할 수 있습니다.

Answer 2

사용 이벤트 위임 :

$('#dinner_table').on('click', '.field', function() { 
    /* your click handler */ 
}); 

그래서, 클릭 핸들러가 (이 경우, TABLE 요소)가 공통 조상에 바인딩됩니다.