Javascript：除非元素附加到document.body，否则不会触发事件

Question

我在javascript中动态创建一个元素（div），在该元素上注册了一个事件侦听器：

var tooltip = document.createElement('div');
tooltip.onclick = function() { alert('hello'); }

现在，如果我将此元素附加到文档主体：

document.body.appendChild(tooltip);

一切都很好，并捕获了事件。 但是（出于定位目的）我想将此元素附加到页面中的（静态）子元素上，例如：

document.getElementById('id').appendChild(tooltip);

并且该元素已正确生成和定位-但现在不再捕获onclick事件。 有什么想法吗？ 这是X浏览器，所以我必须缺少一些东西。

谢谢，唐。

Answer 1

也许您需要在追加后注册事件处理程序？

Answer 2

您不仅要创建一个div，而且要创建许多div。 尝试以下方法（我希望您不介意，但我也修复了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>

Answer 3

您的代码对我来说在firefox 3.0.5和IE7上工作正常。 您确定您的示例正确吗？

Answer 4

好的，这是我的代码，对于延迟，我们深表歉意。 具有解决方法的版本发布在下面：

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

==================================可以-这样就可以了：

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

Answer 5

这是一些代码，用于删除onmouseout的工具提示。

创建工具提示时给它一个ID：

toolTip.setAttribute('id','toolTip');

然后进行鼠标暂停

function removeDiv(container) {
    var toolTip = document.getElementById('toolTip');
    document.getElementById(container).removeChild(toolTip);
}

Javascript：除非元素附加到document.body，否则不会触发事件

问题描述

5 个解决方案

解决方案1
1 2008-12-18 14:55:20

解决方案2
1 2008-12-18 15:00:34

解决方案3
0 2008-12-18 13:58:52

解决方案4
0

解决方案5
0 2009-01-29 17:19:14

Javascript：除非元素附加到document.body，否则不会触发事件

问题描述

5 个解决方案

解决方案1 1 2008-12-18 14:55:20

解决方案2 1 2008-12-18 15:00:34

解决方案3 0 2008-12-18 13:58:52

解决方案4 0

解决方案5 0 2009-01-29 17:19:14

解决方案1
1 2008-12-18 14:55:20

解决方案2
1 2008-12-18 15:00:34

解决方案3
0 2008-12-18 13:58:52

解决方案4
0

解决方案5
0 2009-01-29 17:19:14