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

Posted 2023-05-07

【中文标题】将单击绑定到 panzoom 容器中的元素

【英文标题】：bind click to an element within panzoom container

【发布时间】：2015-03-23 21:17:06

【问题描述】：

我正在使用 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 - 你能回答这个问题以便我标记它吗？谢谢。

【参考方案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。