0

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

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

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

document.body.appendChild(tooltip);

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

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

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

谢谢，唐。

4

5 回答 5

1

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

于 2008-12-18T14:55:20.393 回答
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>
于 2008-12-18T15:00:34.283 回答
0

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

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

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

然后为 onmouseout

function removeDiv(container) {
    var toolTip = document.getElementById('toolTip');
    document.getElementById(container).removeChild(toolTip);
}
于 2009-01-29T17:19:14.947 回答
0

好的，这是我的代码，为延迟道歉。下面发布了一个带有解决方法的版本：

<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>
于 2008-12-18T14:47:41.703 回答
0

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

于 2008-12-18T13:58:52.490 回答