javascript - Jquery 无法在具有特定类的 html 中插入工作 div

Question

这是我的问题:

我正在尝试制作一个游戏并插入一个 div，让您在完成游戏的一部分后进入另一个房间。我的问题是 div 插入了正确的类，但是它似乎不允许我进入房间，但如果我将 div 放在 HTML 中，那么我可以进去。

这是我的代码:

HTML:

<div id="wrapperID" class="wrapper">
...
<div id="hud">Inventory:
    <ul>
       ...
    </ul>
</div>
<!-- This is where the div is supposed to be -->
</div>

CSS:

.thirdWrapper {
   background-image: url("../images/city4-2.gif");
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: green;
   background-repeat: no-repeat;
   background-size: contain;
}
.room-1 {
   background-image: url("../images/room-1.jpg");
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: green;
   background-repeat: no-repeat;
   background-size: contain;
 }
#doorEntry {
    background-color: white;
    position: absolute;
    left: 28.5%;
    top:40%;
    width: 150px;
    height: 200px;
}

Javascript(jQuery):

$(document).ready(function() {
...
$("#item3").click(function() {
    if(document.getElementById('item3').getAttribute("src") == "images/hammer.png"){
        $("#wrapperID").toggleClass("thirdWrapper");
        $("#wrapperID").toggleClass("secondWrapper");
        var door = document.createElement("div");
        door.className += "doorEntry";
        door.setAttribute("id", "doorEntry");
        var element = document.getElementById("wrapperID");
        element.appendChild(door);
    }
});
$("#doorEntry").click(function() {
    $("#wrapperID").toggleClass("room-1");
    $("#wrapperID").toggleClass("thirdWrapper");
});
});

Answer 1

您应该在将 div 附加到 html 之后调用 $("#doorEntry").click(...):

$("#item3").click(function() {
    if(document.getElementById('item3').getAttribute("src") == "images/hammer.png"){
        $("#wrapperID").toggleClass("thirdWrapper");
        $("#wrapperID").toggleClass("secondWrapper");
        var door = document.createElement("div");
        door.className += "doorEntry";
        door.setAttribute("id", "doorEntry");
        var element = document.getElementById("wrapperID");
        element.appendChild(door);
        $("#doorEntry").click(function() {
            $("#wrapperID").toggleClass("room-1");
            $("#wrapperID").toggleClass("thirdWrapper");
        });
    }
});