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