바인드 panzoom 컨테이너 내의 요소를 클릭하십시오.

Question

테이블을 포함하기 위해 jquery.panzoom을 사용하고 있습니다.

각 테이블 셀은이 양식에 있습니다

<td><div class="cell" id="cell-24-14"></div></td> 

표는 동적으로 생성되는, 그래서 나는 시도하고 이벤트 잡기 위해 이것을 사용 : 내가 div의 제거 시도했습니다

$('.cell').on('click', function (e) {   
     alert($(this).attr('id')); 
}); 

을 , 그리고 td의 클릭을 직접 잡아서, 그러나 이것은 잘 작동하지 않았다.
div에서 클릭 수를 잡으면 테이블의 컨테이너가 클릭 수를 포착하고 있지만 클릭 수는 셀 자체가 아니라 표 자체에 도달하지 않습니다.

td (또는 td) 내의 개별 div에서 클릭 이벤트를 어떻게 잡아낼 수 있습니까?

당신은 실제로 이러한 요소는이 방법이

function appendToDOM(){ 
    // creating a td element and appending to DOM 
    var td = $('<td><div class="cell" id="cell-24-14"></div></td>'); 
    td.appendTo($table); 

    /* now that the element is available in DOM, you can define you event handler here*/ 

    $('.cell').on('click', function (e) {   
     alert($(this).attr('id')); 
    }); 
} 

문제처럼 DOM에 추가 된 기능에 결합하는 이벤트 당신은 당신의 테이블의 모든 .cell 요소에 대한 이벤트 처리기를 정의하고 있습니다 이동할 수 있습니다

Answer 1

위임을 사용하면 더 잘 수행 할 수 있습니다.

당신은 당신이 마무리 :

내가 말을 가장 가까운 정적 부모처럼 테이블을 표시하기 직전에이 코드를 호출 할 수 있습니다

, 난 동적 테이블의 부모에 대해서 이야기하고

$('urClosestStaticParent').on('click','.cell',function(e){ 
    alert($(this).attr('id')); 
}); 

그 당신은 문서를로드하는 곳에서 아마도 div 컨테이너를 만들고 있습니다. 이러한 요소가 없으면 html에 빈 div를 추가하고 테이블을 추가 한 다음 사용하십시오 ( document을 사용하지 않는 경우).