当使用 json dict 填充数据表时，在 Jquery 中未检测到 Html 类标记

Posted 2023-02-24

【中文标题】当使用 json dict 填充数据表时，在 Jquery 中未检测到 Html 类标记

【英文标题】：Html class tag not detected within Jquery when datatables populated using a json dict

【发布时间】：2019-01-04 18:34:04

【问题描述】：

我有一个数据表，其中一列带有“打印”选项。该表在视觉上如下所示：

行的 html 是从 django 视图生成的 JSON dict 加载的。

第 3 列的 HTML 如下所示：

<button class="classname_for_js">
    PRINT
</button>

我有一个 javascript 文件：print.js:

jQuery(".classname_for_js").on('click', printData);

printData() 是调用打印 API 进行打印的函数。

为了调试，我正在尝试控制台：

jQuery(".classname_for_js").on('click', function()
     console.log("Printing.....");
);

但是，我在控制台上什么也没有。

我有另一个数据表，其数据不是从 json 字典填充的，打印按钮可以正常工作。

有什么我做错了吗？

【参考方案1】：

你可以像这样编写你的点击处理程序

$(document).on('click', '.classname_for_js', function () 
    console.log("Printing.....");
);

您可以将document 替换为 dom 上已经存在的任何父元素

注意：事件处理程序只绑定到当前选定的 元素；它们必须在您的代码生成时存在于页面上 调用 .on()。

【讨论】：

我认为您需要告诉您建议使用委托处理程序，这将适用于动态注入的HTML。除此之外，我相信你的答案是正确的。

@Deesha，你应该使用'body' 或者更好的'#tableId' 或#container 你的桌子是其中的一部分； document 是您可以使用的最差值，因为在整个 DOM 范围内的 每次 点击都会每次都与第二个选择器进行比较。这是一个巨大的开销，并且会减慢响应时间，因为您的点击会从可以想象的最外层元素冒泡。我个人认为使用$(document).on( 的建议非常非常糟糕。想象一下，你有 10 个委托处理程序，处理 200 个元素，所有元素都指向文档根。巨大的开销。

我给了表格一个 id，但这似乎不起作用。 @大卫康拉德