动态创建的 HTML 元素不适用于事件侦听器。 >:[

Question

简而言之，我想在我的国际象棋中实现拖放（就像你可以拖动棋子一样）。但是有些不对劲。

问题： 动态创建的棋子（右边那个）在其属性列表中有所需的事件监听器，因为我首先动态创建它，然后才为每个棋子添加一个事件监听器。但它不起作用。比如我放另外一个用html创建的棋子（左边那个）。一切正常。

HTML：

<body>
    <div id="chess_field">
        <button class="place" id="place11">
            <div class="figure wp" id="" draggable="true"></div>
        </button>
        <button class="place" id="place12">
        </button>
        <button class="place" id="place13">
        </button>
        <button class="place" id="place14">
        </button>
        <button class="place" id="place15">
        </button>
        <button class="place" id="place16">
        </button>
        <button class="place" id="place17">
        </button>
        <button class="place" id="place18">
        </button>
    </div>
    <script defer src="scripts_ui.js"></script>
</body>

Javascript：

let chessField = [[0, 0, 0, "wp", 0, 0, 0, 0]];

let dragged_element;

function DragEventAdd() {
    let figure = window.document.querySelectorAll(".figure");
    figure = Array.from(figure);
    figure.map((f) => {
        f.addEventListener('dragstart', (event) => {
            console.log("drag started");
        });
    });
}

function arrangeFigures() {
    chessField.map((i, y) => {i.map((j, x) => {
            if (j !== 0) {
                let place = window.document.getElementById(`place${y+1}${x+1}`);
                let figure = document.createElement("div");
                figure.classList.add("figure");
                figure.classList.add(j);
                figure.setAttribute("graggable", true);
                place.appendChild(figure);
            }
        })});
        debugger;
    DragEventAdd();
}

let place_drop = window.document.querySelectorAll(".place");
    place_drop = Array.from(place_drop);
    place_drop.map((pd) => {
        pd.addEventListener('drop', (event) => {
            dragged_element = "";
        });
    });
arrangeFigures();

CSS：

body {
  width: 100vw;
  height: 100vh;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#chess_field {
  width: 80vh;
  height: 80vh;

  display: flex;
  flex-wrap: wrap;
}

.place {
  width: 10vh;
  height: 10vh;
}

.figure {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-color: aqua;
}

.wp {
  background-image: url(img/wp.png);
}

代码说明： 变量“chessField”是一个二维数组，包含有关棋子位置的信息。

“arrageFigures”函数 - 处理将棋子添加到具有“place”类的单元格。

函数“DragEventAdd”- 向他们添加事件监听器。

我翻遍了整个StackOverflow，所有与此相关的问题都是因为人们没有给新创建的元素提供事件监听器。但这似乎不是问题。

Answer 1

快速修复

 function arrangeFigures() {
    chessField.map((i, y) => {i.map((j, x) => {
        if (j !== 0) {
            let place = 
              window.document.getElementById(`place${y+1}${x+1}`);
            let figure = document.createElement("div");
            figure.classList.add("figure");
            figure.classList.add(j);
            figure.setAttribute("draggable", true);
            place.appendChild(figure);
        }
    })});
   
     DragEventAdd();

}

动态创建的 HTML 元素不适用于事件侦听器。 >:[

问题描述投票：0回答：1

1个回答

最新问题

动态创建的 HTML 元素不适用于事件侦听器。 >:[

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1