0

イベント リスナーを登録する要素 (div) を JavaScript で動的に作成します。

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

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 に答える
1

追加後にイベント ハンドラを登録する必要があるのではないでしょうか。

于 2008-12-18T14:55:20.393 に答える
0

onmouseout のツールチップを削除するコードを次に示します。

toolTip を作成するときに 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 に答える