Question

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

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

使用Chrome检查工具，它确实会说<img>元素的ID为#fire-image，但是当在浏览器中单击该图像时，它无法识别该单击，并记录为“点击火灾”。 ”。

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

Answer 1

问题是您要为查询$("#fire-image")返回的内容分配一个事件。

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

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

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

查看jQuery .on()了解更多信息。（请注意，实际上，您可能希望将此事件绑定到一些更直接的父对象。）

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

编辑：我注意到您也在HTML元素中重复ID。您应该avoid。

Answer 2

尝试添加侦听器时，该元素不存在。您需要将其添加到父元素，然后使用选择器参数。例如：

$(document).on('click', '#fire-image', function () {
    // Do stuff
})

Answer 3

第二个侦听器（DynamicField）覆盖了第一个侦听器。您应该添加一个变量，以检查其BigStruct是否已被单击：

UnmarshalJSON