Javascript 为什么在使用JQuery attr（）分配ID后无法与元素交互？

图像显示分配给第3行创建的

元素的id

#fire image

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

使用Chrome inspect工具，它确实会显示

元素的ID为

#fire image

，但是当在浏览器中单击该图像时，它无法识别单击并将“fire clicked…”记录到控制台

---

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

问题在于，您正在为查询

$（“#fire image”）

返回的内容分配事件

首先，没有这样的元素，因为您在稍后的时间点添加了这个ID。因此，事件根本不绑定到任何元素，因此永远不会被触发

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

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

查看更多信息。（请注意，实际上，您可能希望将此事件绑定到更直接的父事件。）

另一种解决方案是仅在为事件分配ID后，才将其绑定到

$（“#fire image”）

编辑：

---

我注意到您也在HTML元素中重复ID。您应该这样做。

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

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

第二个侦听器（

console.log（“Fire clicked…”）

）正在重写第一个侦听器。您应该添加一个变量，以检查是否已单击它的

#fire image

：

var fireClicked = false;
$("#fire-image").on("click", () => {
    if (!fireClicked) {
        console.log("Making fire...");
        $(this).clone().add("<img />").attr("src", "assets/fire-icon.png").attr("id", "fire-image").css("position", "absolute").height(200); //Because you posted an image, you'll have to fill the rest of this in yourself.
        fireClicked = true;
    }
    else {
        console.log("Fire clicked...");
    }
})

var=false；
$（“#火灾图像”）。在（“单击”，（）=>{
如果（！fireClicked）{
控制台日志（“生火…”）；
$（this）.clone（）.add（“id值不应在同一页中重复使用。它们是元素的唯一标识符。正如@Pointy所说。尝试为span元素提供另一个id。请阅读，请不要发布代码图像。发布实际代码本身，以便人们可以复制/粘贴。更好的是，创建一个。