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。

绑定单击到panzoom容器中的元素

1 个答案: