Comment pré-ajouter un écouteur d'événement JavaScript aux éléments générés avec Moustache?

Question

suppose que j'ai ce modèle:

<script type="text/html" id="list_tpl"> 
<ul> 
{{#list}} 
    <li><input value="{{ name }}" /><a href="javascript:void(0);">delete</a></li> 
{{/list}} 
</ul> 
</script> 

render:

Mustache.to_html(document.getElementById("list_tpl").innerHTML), { 
    "list": [ 
     {"name": "a1"}, 
     {"name": "a2"}, 
     {"name": "a3"} 
    ] 
}); 

Je voudrais lier un événement que lorsque le lien delete dans chaque <li> est cliqué, que <li> obtient retiré du DOM .
Je sais que je pourrais lier l'événement après que le rendu soit terminé, mais comme le rendu se produira plusieurs fois (chaque fois que l'utilisateur clique sur un bouton), je ne veux pas le lier à chaque fois.
Comment faire ça bien?

Answer 1

Je ne sais pas comment le faire avec javascript simple, mais Jquery a .live() http://api.jquery.com/live/

de ce site Web: « Joindre un gestionnaire à l'événement pour tous les éléments qui correspondent au sélecteur de courant, et maintenant A l'avenir."

C'est exactement ce que vous demandez.

Voici quelques informations connexes sur le SO comment le faire en javascript plaine: jQuery live() in plain JavaScript?

HTH,

Answer 2

Pour ceux qui débarquèrent ce sujet après la recherche Google et toujours à la recherche d'une réponse: vous pouvez utiliser jQuery pour gérer la délégation avec la méthode "on".

À partir de jQuery 3.0, les méthodes déléguée et active sont amorties.

docs jQuery suggèrent d'utiliser « sur » méthode au lieu de délégué et méthodes en direct, il y a un autre sujet pour l'utilisation « sur » la méthode des éléments futurs: jQuery .on function for future elements, as .live is deprecated