使用 innerHTML 插入的元素不支持文档的脚本答案

【问题标题】：Element inserted with innerHTML doesn't support scripts of the document使用 innerHTML 插入的元素不支持文档的脚本
【发布时间】：2022-12-31 22:55:07
【问题描述】：

文档中加载的脚本不适用于使用 innerHTML 注入的代码。我试图放置异步或延迟但没有任何反应。

...
<script src="../scripts/traffic-lights.js"></script>
<script src="../scripts/resizeable-windows.js"></script>
<script src="../scripts/draggable-windows.js"></script>
<script>
const app = document.getElementById('app');
app.addEventListener("click", function() {addWindow("./app.html", "AppName")});

function addWindow(location, name) {
    const windows = document.createElement('section');
    windows.id = "window";
    windows.innerHTML = `
                      <div class="header" id="header">
                        <div class="traffic-lights" id="traffic-lights">
                          <button class="red" id="red"></button>
                          <button class="yellow" id="yellow"></button>
                          <button class="green" id="green"></button>
                        </div>
                        <div id="movable">
                          <div class="appname">${name}</div>
                        </div>
                      </div>
                      <iframe src=${location} width= "100%" height="100%" style="border:none;"></iframe>`
    document.body.appendChild(windows);
  }
</script>

这是下面脚本的代码：

resizeable-windows.js

element = document.getElementById("window");
makeResizable(element, 400, 225, 10);
...

可拖动-windows.js

dragElement(document.getElementById("window"));

function dragElement(element) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById("movable")) {
    // if present, the header is where you move the DIV from:
    document.getElementById("movable").onmousedown = dragMouseDown;
  } else {
    // otherwise, move the DIV from anywhere inside the DIV:
    element.onmousedown = dragMouseDown;
  }
...

交通灯.js

let trafficLights = document.getElementById("traffic-lights");
let redButton = document.getElementById("red");
let yellowButton = document.getElementById("yellow");
let greenButton = document.getElementById("green");
let windows = document.getElementById("window");

trafficLights.onmouseenter = function () { ...

【问题讨论】：

您需要一个文档级事件处理程序来捕获在声明处理程序之后添加的动态添加的元素。在 jquery 中，$(document).on('click', '#mynewelement', function() {/*do stuff*/});
好的，如果不需要 jQuery，您将如何处理？我想用 Vanilla JavaScript 完成我的项目，然后用 jQuery 更新它。
javascript.info/event-delegation

标签： javascript html css resize draggable

【解决方案1】：

在您的前 3 个脚本中，您查询尚未在 DOM 上的元素（使用 document.getElementById()）（因为它们稍后由您的 addWindow 函数动态添加）。因此你实际上没有得到任何元素。

正如 DeeGee 和 Kooilnc 在问题 cmets 中所建议的，一种可能的解决方案是使用事件委托，附加在已经存在的父元素上（通常是 document，但在您的情况下可能是 app）。

另一种可能的解决方案是仅在您的 addWindow 函数将您的元素插入 DOM 后才初始化您的 3 个脚本：

您可以将他们的代码包装在一个函数中（每个脚本文件 1 个），在插入 DOM 后在 addWindow 中执行该函数：

// traffic-lights.js
// Wrap the setup code with a function
function setupTrafficLights() {
  let trafficLights = document.getElementById("traffic-lights");

  trafficLights.onmouseenter = function () {}
}

<!-- index.html -->
<script src="../scripts/traffic-lights.js"></script>
<script>
  // ...

  function addWindow() {
    // ...
    // Insert into DOM
    document.body.appendChild(windows)

    // Now we can execute setup code that queries injected Elements into DOM
    setupTrafficLights()
  }
</script>

您还可以动态注入 3 个 <script> 标签。

【讨论】：