Привязать щелчок к элементу в контейнере Panzoom

Question

Я использую jquery.panzoom, чтобы содержать таблицу.

Каждая ячейка таблицы имеет следующую форму:

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

Таблица создается динамически, поэтому я использую это, чтобы попытаться поймать событие:

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

Я пытался удалить div и ловить клики на тд, но это не сработало.
Когда я ловлю клики на любом div, я вижу, что контейнеры таблицы ловят клики, но клики никогда не попадают в саму таблицу (и не в ее ячейки).

Как я могу поймать события клика на отдельном div внутри td (или даже td)?

Answer 1

Вы можете фактически переместить привязку события к функции, где эти элементы добавляются в DOM, вот так

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'));
    });
}

Проблема с этим подходом заключается в том, что вы определяете обработчик событий для каждого .cell Элемент в вашей таблице, вы можете сделать лучше, используя делегирование.

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

Вы можете вызвать этот код непосредственно перед отображением таблицы, как последний штрих:)

Когда я говорю "ближайший статический родительский объект", я говорю о родительском элементе динамической таблицы, которую вы создаете, возможно, о контейнере div, который находится там после загрузки документа. Если у вас нет такого элемента, вы можете попробовать добавить какой-нибудь пустой div в html, добавить к нему свою таблицу и использовать ее, если не используете. document вместо.