Javascript：除非元素附加到document.body，否则不会触发事件
[英]Javascript: Event does not fire unless element appended to document.body
问题描述
I dynamically create an element (div) in javascript, on which i register an event listener: 
我在javascript中动态创建一个元素（div），在该元素上注册了一个事件侦听器：
var tooltip = document.createElement('div');
tooltip.onclick = function() { alert('hello'); }
Now, if I attach this element to the document body: 现在，如果我将此元素附加到文档主体：
document.body.appendChild(tooltip);
all is well and the event is captured. 一切都很好，并捕获了事件。 However (for positioning purposes) i want to attach this element to a (static) sub-element within my page, eg: 但是（出于定位目的）我想将此元素附加到页面中的（静态）子元素上，例如：
document.getElementById('id').appendChild(tooltip);
and the element is generated and positioned correctly - but the onclick event now is no longer captured. 并且该元素已正确生成和定位-但现在不再捕获onclick事件。 Any thoughts? 有什么想法吗？ This is x-browser, so i must be missing something. 这是X浏览器，所以我必须缺少一些东西。
Thanks, Don. 谢谢，唐。
5 个解决方案
解决方案1
1 2008-12-18 14:55:20
也许您需要在追加后注册事件处理程序？
解决方案2
1 2008-12-18 15:00:34
You're creating not only one but MANY divs. 您不仅要创建一个div，而且要创建许多div。 Try this instead(I hope you don't mind but I fixed the HTML and CSS too): 尝试以下方法（我希望您不介意，但我也修复了HTML和CSS）：
<html>
<head>
<script type="text/javascript">
function makeDiv() {
if(!document.getElementById('tooltipDiv')){
var tooltip = document.createElement('div');
tooltip.id = "tooltipDiv";
// Give our tooltip a size and colour so we can see it
tooltip.style.height = '200px';
tooltip.style.position = 'absolute';
tooltip.style.width = '200px';
tooltip.style.backgroundColor = '#eee';
// Register onclick listener
tooltip.onclick = function() { alert('hello'); }
//tooltip.addEventListener("click", function(){ alert('hello'); }, false);
// *** Comment one of these out: ***
//document.body.appendChild(tooltip);
document.getElementById('myDiv').appendChild(tooltip);
}
}
</script>
</head>
<body>
<div id="myDiv"
onmouseover="makeDiv();"
style="position: relative; top: 100px; left: 100px; border: 1px solid red; width: 200px;">
<span>my div text</span>
</div>
</body>
</html>
解决方案3
0 2008-12-18 13:58:52
Your code works fine for me on firefox 3.0.5 and IE7. 您的代码对我来说在firefox 3.0.5和IE7上工作正常。 Are you sure your example is correct? 您确定您的示例正确吗？
解决方案4
0
Ok all, here is my code, apologies for the delay. 好的，这是我的代码，对于延迟，我们深表歉意。 A version with a work-around is posted underneath: 具有解决方法的版本发布在下面：
<html>
<head>
<script type="text/javascript">
function makeDiv() {
var tooltip = document.createElement('div');
// Give our tooltip a size and colour so we can see it
tooltip.style.height = '200px';
tooltip.style.position = 'absolute';
tooltip.style.width = '200px';
tooltip.style.backgroundColor = '#eee';
// Register onclick listener
tooltip.onclick = function() { alert('hello'); }
// *** Comment one of these out: ***
//document.body.appendChild(tooltip);
document.getElementById('myDiv').appendChild(tooltip);
}
</script>
</head>
<body>
<div id="myDiv"
onmouseover="makeDiv();"
style="position: relative; top: 100px; left; 100px; border: 1px solid red; width: 200px;">
<span>my div text</span>
</div>
</body>
</html>
=================================== OK - so this works: ==================================可以-这样就可以了：
<html>
<head>
<script type="text/javascript">
function makeDiv() {
var tooltip = document.createElement('div');
// Give our tooltip a size and colour so we can see it
tooltip.style.height = '200px';
tooltip.style.position = 'absolute';
tooltip.style.width = '200px';
tooltip.style.backgroundColor = '#eee';
// Register onclick listener
tooltip.onclick = function() { alert('hello'); }
// *** Comment one of these out: ***
//document.body.appendChild(tooltip);
document.getElementById('container').appendChild(tooltip);
}
</script>
</head>
<body>
<div id="container" style="border: 1px solid blue; float: left; ">
<div id="myDiv"
onmouseover="makeDiv();"
style="position: relative; border: 1px solid red; width: 200px;">
<span>my div text</span>
</div>
</div>
</body>
</html>
解决方案5
0 2009-01-29 17:19:14
Here is some code to remove the tooltip for onmouseout. 这是一些代码，用于删除onmouseout的工具提示。
Give your toolTip an ID when creating it: 创建工具提示时给它一个ID：
toolTip.setAttribute('id','toolTip');
Then for onmouseout 然后进行鼠标暂停
function removeDiv(container) {
var toolTip = document.getElementById('toolTip');
document.getElementById(container).removeChild(toolTip);
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.