时间戳

首页 > 解决方案 > 为什么在使用 JQuery attr() 分配 ID 后无法与元素交互？

javascript - 为什么在使用 JQuery attr() 分配 ID 后无法与元素交互？

问题描述

实际代码

Chrome 检查视图

#fire-image图像显示分配给<img>在第 3 行创建的元素的 id 。

从第 6 行开始的下一个块只是一个控制台日志，用于识别已单击的图像。

使用 Chrome 检查工具，它确实说该<img>元素有一个 ID，#fire-image但是当在浏览器中单击该图像时，它无法识别单击并将“Fire clicked...”记录到控制台。

为什么即使浏览器识别为具有正确的 ID，我也无法与图像交互？

标签： javascriptjqueryhtml

解决方案

问题是您将事件分配给查询$("#fire-image")返回的任何内容。

好吧，起初没有这样的元素，因为您稍后会添加此 ID。因此，事件根本不绑定到任何元素，因此永远不会被触发。

一种解决方案是将事件添加到您确实知道存在的父元素中，例如如下：

$(document).on('click', '#fire-image', function() {/* your code */});

查看jQuery.on()以获取更多信息。（请注意，在实践中，您可能希望将此事件绑定到更直接的父级。）

另一种解决方案是$("#fire-image")仅在您为其分配 ID 之后才将事件绑定到。

编辑：我注意到您还在 HTML 元素中重复 ID。这是你应该避免的。

推荐阅读