Attacher un événement à la volée avec le prototype

Question

Je me suis gratté la tête dessus pendant une heure ... J'ai une liste de todo qui a fait bouton sur chaque élément. Chaque fois qu'un utilisateur clique dessus, il est supposé faire un appel Ajax au serveur, appelant la fonction de marquage puis met à jour toute la liste.

Le problème que je suis confronté est que la nouvelle liste a fait boutons ainsi sur chaque élément. Et il n'attache plus l'événement click après la première mise à jour.

Comment attacher un gestionnaire d'événements sur un élément nouvellement mis à jour avec prototype?

Note: J'ai passé evalScripts: fidèle à l'emballage updater

gestionnaire d'événements initial attach

<script type="text/javascript"> 
document.observe('dom:loaded', function() { 

    $$('.todo-done a').each(function(a) { 
    $(a).observe('click', function(e) { 
    var todoId = $(this).readAttribute('href').substr(1); 
    new Ajax.Updater('todo-list', $.utils.getPath('/todos/ajax_mark/done'), { 
    onComplete: function() { 
     $.utils.updateList({evalScripts: true}); 
    } 
    }); 
    }); 
    }) 
}); 
</script> 

updateList:

<script type="text/javascript"> 
var Utils = Class.create({ 
    updateList: function(options) { 
    if(typeof options == 'undefined') { 
    options = {}; 
    } 

    new Ajax.Updater('todo-list', $.utils.getPath('/todos/ajax_get'), $H(options).merge({ 
     onComplete: function() { 
     $first = $('todo-list').down(); 
     $first.hide(); 
     Effect.Appear($first, {duration: 0.7}); 
     new Effect.Pulsate($('todo-list').down(), {pulses: 1, duration: 0.4, queue: 'end'}); 
    } 
    }) 
    );  
    } 
}) 

$.utils = new Utils('globals'); 
</script> 

toute aide est très appréciée, merci :)

Answer 1

Vous pouvez utiliser des comportements à faible pro à github
Certains documents à http://www.danwebb.net/2006/9/3/low-pro-unobtrusive-scripting-for-prototype

donc le code ressemblerait à quelque chose comme :

Event.addBehavior({ 
    '.todo-done a:click' : function(e) { 
    var todoId = $(this).readAttribute('href').substr(1); 
    new Ajax.Updater('todo-list', $.utils.getPath('/todos/ajax_mark/done'), { 
     onComplete: function() { 
     $.utils.updateList({evalScripts: true}); 
     } 
    }); 
    }); 
}); 

Answer 2

il peut être utile d'essayer de désinscrire initialement votre clic han dlers comme ceci:

$$('.todo-done a').each(function(a) { 
    $(a).stopObserving('click); 
}); 

de toute façon vous devez ajouter votre nouveau gestionnaire d'événements au sein de votre onComplete mais cela ne devrait être nécessaire pour les nouveaux éléments dom.

Rappelez-vous, comme toujours que Firebug et console.log() sont à votre ami :)