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

Question

The scripts loaded in the document doesn't work on the injected code with innerHTML. I tried to put async or defer but nothing happened.

...
<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>

Here the code for the script below:

• resizeable-windows.js

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

• draggable-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;
  }
...

• traffic-lights.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 () { ...

Answer 1

In your first 3 scripts, you query Elements (with document.getElementById() ) which are not on the DOM yet (because they are added later dynamically by your addWindow function). Hence you actually get no Element.

As suggested by DeeGee and Kooilnc in the question comments, one of the possible solutions would be to use event delegation, attached on an already existing parent Element (typically the document , but could be app in your case).

Another possible solution would be to initialize your 3 scripts only once your addWindow function has inserted your Elements into the DOM:

• You can wrap their code in a function (1 per script file), that you execute inside addWindow after the DOM insertion:

// 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>

• You could also dynamically inject the 3 <script> tags.