Comment maintenir l'observation d'événement après la mise à jour d'un élément

Question

Je travaille sur un projet dans lequel je place un champ de recherche avec un ensemble de résultats par défaut, sur la mise en page en utilisant Prototype déclenché à partir d'un événement click.

Lorsque la sortie est définie, cette nouvelle page a son propre Javascript qui est utilisé, pour filtrer dynamiquement les résultats.

Maintenant, le nouvel ensemble de résultats ne fonctionne pas avec l'ensemble Javascript précédemment. Comment puis-je maintenir un événement persistant en appelant de nouveaux événements à chaque fois? Ou est-ce ce que je suis censé faire.

Voici un morceau de code qui est chargé dans 'loaded_page.php'

<script language="javascript"> 
    var o = new Compass_Modal('add_button', 'history'); 
    var placetabs = new Tabs('tabs', { 
     className: 'tab', 
     tabStyle: 'tab' 
    }); 
    $$('.add_button').each(function(s, index){ 
     $(s).observe('click', function(f) { 
      loadData(); 
     }); 
    }); 

    function loadData() { 
     new Ajax.Request('/sponsors/search', { 
      onComplete: function(r) { 
       $('overlay').insert({ 
        top:'<div id="search_table">'+r.responseText+'</div>' 
       }); 
      } 
     }) 
    } 
</script> 

ensuite sur la page inclus qui est inséré via javascript:

<div id="search_overlay"> 
    <div id="form_box"> 
     <a href="javascript:void(null);"><img src="/images/closebox2.png" class="closebox" /></a> 
     <form method="post" id="search_form" class="pageopt_left"> 
      <input type="text" name="search_box" id="search_box" value="search" /> 
     </form> 
    </div> 
    <div id="table_overlay"> 
     <table class="sortable" id="nf_table" cellpadding="0" border="0" cellspacing="0"> 
<tr> 
<th id="name_th">Name</th><th id="amount_th">Amount</th><th id="tax_letter_th">Tax Letter</th><th id="date_th">Date</th><th id="add_th">Add</th></tr> 
<tr> 
<td>Abramowitz Foundation (The Kenneth & Nira)</td><td><input type="text" name="amount" value="" id="amount_111" /></td><td><input type="checkbox" name="tax_letter" value="1" id="tax_letter_111" /></td><td><input type="text" name="date" value="" id="date_111" /></td><td><a href="http://compass.krd.webhop.net/sponsors/add/111" class="add_button"><img src="/images/icons/add.png" title="add contact" /></a></td></tr> 
... more rows 
</table> 
    </div> 
</div>  
<script language="javascript"> 
    var c = new Compass_Search('contacts', 'table_overlay'); 
    c.set_url('/sponsors/sponsor_search'); 
    $$('.add_button').each(function(s, index) { 
     $(s).observe('click', function(e) { 
      $(e).stop(); 

      var params = $(s).href.split("/"); 
      var userid = params[5]; 
      var amount = 'amount_'+params[5]; 
      var date = 'date_'+params[5]; 
      var tax  = 'tax_letter_'+params[5]; 
      if(!Form.Element.present(amount) || !Form.Element.present(date)) { 
       alert('your amount or date field is empty '); 
      } else { 
       var add_params = {'amount':$F(amount), 'date':$F(date), 'tax':$F(tax), 'id':userid}; 
       if(isNaN (add_params.amount)) { 
        alert('amount needs to be a number'); 
        return false; 
       } else { 
        new Ajax.Request('/sponsors/add', { 
         method: 'post', 
         parameters: add_params, 
         onComplete: function(e) { 
          var post = e.responseText; 
          var line = 'amount_'+add_params.id; 
          $(line).up(1).remove(); 
         } 
        }) 
       } 
      } 
     }); 
    }); 

    this.close = $$('.closebox').each(function(s, index) { 
     $(s).observe('click', o.unloader.bindAsEventListener(this)); 
}) 
</script> 

Vous remarquerez dans la partie insérée, un nouveau Javascript qui a également mis à jour son propre contenu avec de nouveaux observateurs. Lorsque le contenu est mis à jour, les observateurs ne fonctionnent pas.

Answer 1

Comme vous appelez Element insert #, je suppose cordes # evalScripts devraient être appelés automatiquement (comme ayant regardé dans la mise en œuvre de ces méthodes)

Peut-être que vous pouvez essayer de faire un peu console.log()/alert() messages avant l'élément # observer les appels, pour voir où il va mal. C'est peut-être parce que le Javascript n'est pas évalué du tout, ou qu'il y a quelque chose qui ne va pas avec votre code ou quelque chose comme ça.

En tant que conseil: consultez la documentation sur # Array invoquez, avec cette méthode, vous pouvez réécrire quelque chose comme:

$$('.add_button').each(function(s, index){ 
    $(s).observe('click', function(f) { 
     loadData(); 
    }); 
}); 

dans ce:

$$('.add_button').invoke('observe', 'click', function(event){ 
    loadData(); 
}); 
// $$('.add_button').invoke('observe', 'click', loadData); 

Answer 2

utiliser la délégation de l'événement.

En plus de rendre possible de remplacer « observées » éléments, cette approche est également plus rapide et plus efficace de la mémoire.

document.observe('click', function(e){ 
    var el = e.findElement('.add_button'); 
    if (el) { 
    // stop event, optionally 
    e.stop(); 
    // do stuff... `el` now references clicked element 
    loadData(); 
    } 
});