Est-il possible d'ajouter un élément à innerHTML sans détruire les fonctions onclick des descendants ?

Question

Est-il possible d'ajouter un élément à innerHTML sans détruire les fonctions onclick des descendants ?

Demandé el 27 de Février, 2009: Quand la question a-t-elle été
70092 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Dans l'exemple de code suivant, j'attache un gestionnaire onclick au span contenant le texte "foo". Le gestionnaire est une fonction anonyme qui fait apparaître un alert().

Cependant, si j'ajoute le texte innerHTML du nœud parent, ce gestionnaire onclick est détruit : cliquer sur "foo" ne fait pas apparaître la boîte d'alerte.

Est-ce que ça peut être réparé ?

<html>
 <head>
 <script type="text/javascript">

  function start () {
    myspan = document.getElementById("myspan");
    myspan.onclick = function() { alert ("hi"); };

    mydiv = document.getElementById("mydiv");
    mydiv.innerHTML += "bar";
  }

 </script>
 </head>

 <body onload="start()">
   <div id="mydiv" style="border: solid red 2px">
     <span id="myspan">foo</span>
   </div>
 </body>

</html>

Demandé el 27 de Février, 2009 par mike

Answer 1

5 Réponses

Answer 2

160voto

Ben Blank Points 21786

Malheureusement, l'affectation à innerHTML entraîne la destruction de tous les éléments enfants, même si vous essayez d'ajouter des éléments. Si vous souhaitez préserver les nœuds enfants (et leurs gestionnaires d'événements), vous devrez utiliser la méthode suivante Fonctions DOM :

function start() {
    var myspan = document.getElementById("myspan");
    myspan.onclick = function() { alert ("hi"); };

    var mydiv = document.getElementById("mydiv");
    mydiv.appendChild(document.createTextNode("bar"));
}

Edit : La solution de Bob, d'après les commentaires. Publie ta réponse, Bob ! Soyez crédité de votre réponse. :-)

function start() {
    var myspan = document.getElementById("myspan");
    myspan.onclick = function() { alert ("hi"); };

    var mydiv = document.getElementById("mydiv");
    var newcontent = document.createElement('div');
    newcontent.innerHTML = "bar";

    while (newcontent.firstChild) {
        mydiv.appendChild(newcontent.firstChild);
    }
}

Répondu el 27 de Février, 2009 par Ben Blank (21786 Points )

Answer 3

4voto

rocketsarefast Points 1167

Aujourd'hui, nous sommes en 2012, et jQuery dispose de fonctions append et prepend qui font exactement cela, ajouter du contenu sans affecter le contenu actuel. Très utile.

Répondu el 20 de Janvier, 2012 par rocketsarefast (1167 Points )

Answer 4

3voto

Eneroth3 Points 11

J'ai créé mon balisage pour qu'il soit inséré sous la forme d'une chaîne de caractères, car c'est moins de code et plus facile à lire que de travailler avec le truc fantaisiste du dom.

Ensuite, j'en ai fait le innerHTML d'un élément temporaire afin de pouvoir prendre le seul et unique enfant de cet élément et l'attacher au corps.

var html = '<div>';
html += 'Hello div!';
html += '</div>';

var tempElement = document.createElement('div');
tempElement.innerHTML = html;
document.getElementsByTagName('body')[0].appendChild(tempElement.firstChild);

Répondu el 4 de Juillet, 2012 par Eneroth3 (11 Points )

Answer 5

1voto

Cargowire Points 633

Par ailleurs, si vous utilisez une bibliothèque javascript telle que jquery (v1.3) pour manipuler les domaines, vous pouvez utiliser des événements en direct en mettant en place un gestionnaire comme celui-ci :

 $("#myspan").live("click", function(){
  alert('hi');
});

et il sera appliqué à ce sélecteur à tout moment pendant toute sorte de manipulation de jquery. Pour les événements en direct, voir : docs.jquery.com/events/live pour la manipulation de jquery voir : docs.jquery.com/manipulation

Répondu el 28 de Février, 2009 par Cargowire (633 Points )

Answer 6

0voto

Yes - that Jake. Points 9184

La perte des gestionnaires d'événements est, selon moi, un bug dans la façon dont Javascript gère le DOM. Pour éviter ce comportement, vous pouvez ajouter ce qui suit :

function start () {
  myspan = document.getElementById("myspan");
  myspan.onclick = function() { alert ("hi"); };

  mydiv = document.getElementById("mydiv");
  clickHandler = mydiv.onclick;  // add
  mydiv.innerHTML += "bar";
  mydiv.onclick = clickHandler;  // add
}

Répondu el 27 de Février, 2009 par Yes - that Jake. (9184 Points )

Est-il possible d'ajouter un élément à innerHTML sans détruire les fonctions onclick des descendants ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Est-il possible d'ajouter un élément à innerHTML sans détruire les fonctions onclick des descendants ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: