無法將事件附加到上下文片段中的元素

Question

我嘗試將事件附加到上下文片段中的元素，然后將此元素附加到正文。 但事件沒有被附加。

var range = document.createRange();
var listE1 = "<div>Hello World</div>"
range.selectNode(document.getElementsByTagName("div").item(0));
var element = range.createContextualFragment(listEl);

element.querySelector("div").addEventListener("click", function () {
    alert("hello");
}, true);

document.body.appendChild(element);

將此元素附加到 body 后，div 根本沒有任何事件

Answer 1

在尋找相同的答案后，我偶然發現了這里，我知道這是一個非常古老的問題，希望這有助於或指出更好的方向。

range.createContextualFragment(listEl); 返回一個DocumentFragment 。 簡而言之， DocumentFragment 是最小化的 DOM 對象。 它沒有 attachEventListener。

如果你願意，你可以使用DOMParser或使用document.createElement

這是一個如何使用 DOMParser 的示例

let listE1 = "<div>Hello World</div>"
let element = new DOMParser().parseFromString(listE1 , 'text/html').documentElement;
element.addEventListener("click", function () {
    alert("hello");
}, true);

document.body.appendChild(element);

希望這可以幫助。

Answer 2

只有很多小錯誤，代碼應該很容易運行：我們應該將片段添加到文檔，然后添加事件偵聽器

 var range = document.createRange(); var listE1 = "<div id='hello'>Hello World</div>" range.selectNode(document.getElementsByTagName("div").item(0)); var element = range.createContextualFragment(listE1); // listel -> liste1 document.body.appendChild(element); // should add to document first document.querySelector("div#hello").addEventListener("click", function() { // element->document alert("hello"); }, true);