JQuery permet de rajouter à la volée des événements dans le DOM.
Ici l’on créé un nouvel élément DIV dans le DOM (qui n’existe pas dans le document HTML de départ)
var new_element = jQuery('<div id="new_elt">?</div>'); // On ajoute du style avec la fonction .css() new_element.css({ background: 'gray', width : '50px', height : '30px', padding : '3px' });
Pour le moment, notre élément new_element existe, il est stocké dans la mémoire, mais il n’est pas encore affiché à l’écran.
Pour l’insérer dans le DOM, il faut ajouter ce nouvel élément new_element à l’intérieur d’un élément existant dans le document HTML avec les méthode JQuery append() ou prepend()
$('body').append(new_element);
Ici on a ajouté notre nouvel élément div new_element à la fin du body du document HTML (pour l’insérer au début, on aurait utilisé la méthode prepend())
source : http://www.finalclap.com/tuto/cours-jquery-61/manipuler-dom-66/
Avertissement :
le nouvel élément rajouté ainsi dans le DOM ne répondra pas aux évenements associés à sa classe ou à son sélecteur !!
Par exemple, le div précédemment ajouté dans le DOM, d’identifiant id= »new_elt » ne répondra pas à l’événement suivant :
$("#new_elt").click (function () { alert ('cette alerte ne sera jamais déclenchée...'); });
Pour pouvoir agir sur l’évenement click du div #new_elt inséré dans le DOM, il faut obligatoirement faire appel à la fonction JQuery live()
live() permet d’associer un événement à un élément qui n’existe pas encore au moment de l’affichage
$("#monDiv").live("click", function(){ alert ('hourra, j'ai cliqué sur new_element'); });
Laisser un commentaire
Participez-vous à la discussion?N'hésitez pas à contribuer!