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。试试这个（我希望你不介意，但我也修复了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');

然后是onmouseout

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

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

5 个答案: