Question

我尝试将事件附加到上下文片段中的元素，然后将此元素附加到body。但事件没有附加。

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);

无法将事件附加到上下文片段中的元素

2 个答案: