Ajouter dynamiquement des hyperliens vers DOM avec des événements pré-câblés?

Question

J'ai une table où une colonne inclut un lien hypertexte. Le chargement de la page, il y a un certain nombre de lignes déjà peuplées, et je suis dénombraient sur le tableau et accroché l'événement cliquez sur chaque lien:

$$("a[id^=remove]").each(function (item) { 
    item.observe("click", removeDevice); 
}); 

Cette partie fonctionne; un clic sur le lien hypertexte exécute la méthode removeDevice, qui inclut un appel Event.stop pour empêcher le lien hypertexte de naviguer.

Ensuite, j'ajoute de nouvelles lignes à cette table et j'ai besoin de nouveaux hyperliens qui fonctionnent de la même manière. Je crée en utilisant ces prototypes, comme dynamiquement ceci:

var remove = new Element("a", { id: "remove-{SerialNumber}".interpolate(device), href: "/Home/Javascript" }) 
    .update("Remove") 
    .observe("click", removeDevice); 

Cependant, je suis maintenant coincé avec la façon d'obtenir cet élément dans ma table et ont encore les événements câblés. Je peux obtenir le lien hypertexte pour apparaître en faisant ceci:

newRow.insert({ bottom: new Element("td").update(remove.outerHTML) }); 

mais, comme vous pouvez l'imaginer, les événements ne fonctionnent plus ici. Y a-t-il un moyen d'ajouter l'élément directement, en conservant les événements que j'ai branchés?

Answer 1

Je l'ai fait la même chose dans le passé et a dû comprendre comment utiliser la propagation des événements pour observer l'événement au parent de sorte que tous les éléments (dynamiques ou autrement) déclenchent mon gestionnaire

en utilisant votre exemple de lignes de données

<table id="clickablerows"> 
    <tr><td><a href="javascript:void(0);" class="clickme">Click Me</a></td></tr> 
    <tr><td><a href="javascript:void(0);" class="clickme">Click Me</a></td></tr> 
    <tr><td><a href="javascript:void(0);">Don't Click Me</a></td></tr> 
</table> 

vous pouvez observer l'élément de table, mais attention pour l'événement qui bouillonne à partir du lien

$('clickablerows').on('click','.clickme',function(e,target){ 
    // e is the Event object 
    // `this` is the <table> element 
    // target is the element that matches the CSS selector (2nd parameter) 

}); 

avec elle câblé cette wa y vous avez seulement un observateur vs beaucoup d'observateurs de faire $$().each() et peu importe quels éléments sont ajoutés à la table s'ils correspondent au sélecteur CSS, il déclenche le gestionnaire. Parfois, je vais être paresseux et faire document.on('click','.clickme',function(e,target){}) qui surveille les clics à l'objet document racine

Avertissement: certains événements ne pas bulles comme le focus ou le flou, vérifiez sur MDN pour voir si l'événement que vous voulez utiliser se propage jusqu'à éléments parents.