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

【问题标题】：Javascript: Event does not fire unless element appended to document.bodyJavascript：除非元素附加到 document.body，否则事件不会触发
【发布时间】：2010-09-27 12:45:55
【问题描述】：

我在 javascript 中动态创建一个元素 (div)，并在其上注册一个事件监听器：

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

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

document.body.appendChild(tooltip);

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

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

并且元素已正确生成和定位 - 但现在不再捕获 onclick 事件。有什么想法吗？这是 x 浏览器，所以我一定错过了什么。

谢谢，唐。

【问题讨论】：

标签： javascript events event-handling

【解决方案1】：

您创建的不仅是一个，而是许多 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>

【讨论】：

更新：是的，因为 tooltip 是 'myDiv' 的子级，它也会触发鼠标悬停。

【解决方案2】：

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

【讨论】：

嗨 - 是的，不幸的是似乎没有任何区别

【解决方案3】：

您的代码在 Firefox 3.0.5 和 IE7 上运行良好。你确定你的例子是正确的吗？

【讨论】：

啊，你打败了我。我已经在 FF4、IE7、Opera 7 和 Chrome 中进行了测试，并且可以正常工作。 OP可以发布一个完整的例子吗？肯定还有其他问题。
嗨 - 好的，我在下面发布了我的代码（作为答案），你会发现它只适用于 document.body。

【解决方案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>

【讨论】：

问题在FF3、IE7和Chrome中存在，但在Opera中有效。
对不起我之前的评论（我现在删除了）。我有点着急。我想我可以在我的电脑上复制你的问题。我看看我能不能回答这个问题。
好的，我想我有一个解决方法，我会将它添加到我的“答案”的底部，以便您查看（以后我将简单地编辑我的原始帖子；））。问题似乎是由于“myDiv”是触发创建“工具提示”的元素和附加工具提示的元素。

【解决方案5】：

这里是一些删除 onmouseout 工具提示的代码。

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

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

然后是onmouseout

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

【讨论】：