Javascript: l'événement ne se déclenche pas à moins que l'élément ajouté à document.body

créer dynamiquement un élément (div) en javascript, sur lequel j'enregistrer un écouteur d'événement:Javascript: l'événement ne se déclenche pas à moins que l'élément ajouté à document.body

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

Maintenant, si j'attache cet élément le corps du document:

document.body.appendChild(tooltip);

tout est bien et l'événement est capturé. Toutefois (à des fins de positionnement) Je veux attacher cet élément à un (statique) sous-élément dans ma page, par exemple:

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

et l'élément est généré et positionné correctement - mais l'événement onclick n'est maintenant plus capturé. Des pensées? C'est x-browser, donc je dois manquer quelque chose.

Merci, Don.

Source

2008-12-18 Anonymous

Votre code fonctionne bien pour Firefox 3.0.5 et IE7. Êtes-vous sûr que votre exemple est correct?

Source

2008-12-18 13:58:52 grepsedawk

Ah, vous me devança. J'ai testé en FF4, IE7, Opera 7 et Chrome, et cela fonctionne. L'OP peut-il poster un exemple complet? Il doit y avoir quelque chose d'autre qui ne va pas. – some

Appuyée: veuillez poster plus de code. – annakata

ok, merci les gars, une minute ... –

Ok tout, voici mon code, excuses pour le retard. Une version avec un travail autour est affiché en dessous:

<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>

================================ === OK - si cela fonctionne:

<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>

Source

2008-12-18 14:47:41

Salut oui, je viens de mettre à jour cela. vraiment? ne fonctionne pas dans FF3.0.4 –

Le problème existe dans FF3, IE7 et Chrome, mais il fonctionne dans Opera. – some

Désolé pour mon commentaire plus tôt (je l'ai supprimé maintenant). Je me suis précipité un peu. Je pense que je peux reproduire votre problème sur mon ordinateur. Je vais voir si je peux répondre à cela. – luiscubal

Peut-être que vous devez enregistrer le gestionnaire d'événements après annexant?

Source

2008-12-18 14:55:20 Kev

salut - oui ne semble pas faire de différence malheureusement –

Ah, d'accord, merci de l'essayer ... – Kev

Vous créez non seulement un mais plusieurs divs. Essayez plutôt (je l'espère ne vous dérange pas, mais je fixe le code HTML et CSS aussi):

<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>

Source

2008-12-18 15:00:34 luiscubal

Je suis d'accord, de nombreux divs sont créés. – some

ah bien sûr! parce que je déclenche mouseover chaque fois que je vais cliquer ... –

luiscubal - et tout le monde - merci beaucoup pour l'aide –

Voici un code pour supprimer l'info-bulle pour onmouseout.

Donnez votre toolTip un ID lors de sa création:

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

Alors pour onmouseout

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

Source

2009-01-29 17:19:14 Casey

Javascript: l'événement ne se déclenche pas à moins que l'élément ajouté à document.body

Répondre

Questions connexes