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

【问题标题】：bind click to an element within panzoom container将单击绑定到 panzoom 容器中的元素
【发布时间】：2023-03-28 23:38:01
【问题描述】：

我正在使用 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 上捕获点击事件？

【问题讨论】：

你到底想做什么？
将点击绑定到 td 中的 div。这是一个游戏，网格是一张桌子。我不确定我在回答你的问题，你具体是什么意思？
您无法在动态创建的表中的div 元素上注册事件处理程序，是这样吗？如果是，请尝试在您将动态表附加到 DOM 的同一函数中注册您在问题中发布的点击处理程序，即只需将代码移至该 appendToDOM 函数
@Arkantos - 你能回答这个问题以便我标记它吗？谢谢。

标签： jquery jquery.panzoom

【解决方案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。

【讨论】：