绑定单击到pan缩放容器中的元素

Question

我使用jquery.panzoom来包含一个表。

每个表格单元格都是这样的：

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

表是动态创建的，因此我使用它来尝试捕获一个事件：

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

我试过移除div，直接捕捉td上的点击，但这也不起作用。

当我捕捉到任何div上的单击时，我看到表的容器正在捕捉单击，但单击永远不会到达表本身(而不是其单元格)。

如何捕捉td (甚至td)中单个div上的单击事件？

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容器。如果您没有任何这样的元素，您可以尝试在html中添加一些空的div，将表追加到其中，如果不使用document，则使用该表。