Javascript动态插入DOM元素自动触发onclick事件
Javascript动态插入DOM元素自动触发onclick事件
提问于 2019-11-03 18:51:29
我一直在为一个我正在做的项目做一个自动完成功能。我希望用户能够点击的自动完成，这将查询更多有关该产品的信息。当为动态创建的DOM元素分配onclick事件时，称onclick事件自动触发。
现在，我在js小提琴中复制了这个“错误”：https://jsfiddle.net/50y4ma8h/2/。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<div id="results">
</div>
</body>
</html>JS
var resultsElement = document.getElementById("results");
var div = document.createElement("DIV");
div.append("Hey");
div.onclick = querySomething();
resultsElement.innerHTML = div.outerHTML;
function querySomething() {
alert("hey");
}我不明白为什么分配给oncllick事件的函数会自动调用。
如能提供任何帮助，我将不胜感激:)
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-11-03 18:54:41
div.onclick = querySomething();
是将结果 of querySomething函数分配给处理程序，而不是函数本身。
你可能是说：
div.onclick = querySomething;
还请注意，将innerHTML移到其他地方不会带来绑定的onclick侦听器，因此resultsElement不会附加此事件。
Stack Overflow用户
发布于 2019-11-03 19:09:55
由于您没有将创建的div真正附加到resultsElement中，所以不能将eventListener附加到它，所以我会稍微修改代码。
var resultsElement = document.getElementById("results");
var div = document.createElement("DIV");
div.append("Hey");
div.addEventListener('click', querySomething);
resultsElement.appendChild(div);
function querySomething() {
alert("hey");
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<div id="results">
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58683536
复制相关文章
相似问题
腾讯云开发者
