Mootools: injecter vs adopter

Question

Je souhaite ajouter de manière dynamique des éléments HTML préconfigurés lors de l'utilisation d'un événement 'click' avec mootools. Je peux donc le faire fonctionner avec mes connaissances de base, même si ce n'est pas très chouette. Je Codé Ce jusqu'à présent ...

Ceci est mon élément préconfiguré, avec un texte, un nom de classe et un événement, parce que je veux avoir des événements déjà ajoutés, lorsque inséré dans mon d'une manière contenant:

 var label = new Element('label', { 
      'text': 'Label', 
      'class': 'label', 
      'events': { 
       'click': function(el){ 
        alert('click'); 
       } 
      } 
     }); 

Voici ma fonction, qui ajoute l'étiquette-élément:

 function addText(){ 
      $('fb-buildit').addEvent('click', function(){     
      row.adopt(label, textinput, deletebtn); 
      $('the-form').adopt(row.clone()); 
      row.empty(); 

    /* 
    label.clone().inject($('the-form')); 
    textinput.inject($('the-form')); 
    deletebtn.inject($('the-form')); 
    */ 

      }); 
     } 

la deuxième partie qui utilise injectent fonctionne aussi, mais là, mon clic-événement qui déclenche le « alert (« clic ») » œuvres aussi. La méthode avec adopter n'ajoute aucun évènement à mon label Object, quand il est inséré dans le dom.

Quelqu'un peut-il m'aider avec ceci. Je veux juste savoir pourquoi adobt ignore mes paramètres "events" et n'injecte pas.

Merci d'avance.

(désolé pour mon anglais ^^)

Answer 1

vous allez label.clone().inject mais row.adopt(label) et non row.adopt(label.clone()) -

de toute façon. .clone() n'est pas cloneEvents pour vous - vous devez le faire manuellement.

var myclone = label.clone(); 
myclone.cloneEvents(label); 
row.adopt(label); 

voici comment cela fonctionne

Quant à savoir pourquoi c'est, les événements sont stockés dans le stockage des éléments - qui est unique par élément. mootools assigne un uid à chaque élément, par exemple, label = 1, label.clone() -> 2, label.clone() -> 3, etc.

cela va à Storage[1] = { events: ... } et ainsi de suite. cloner un élément fait pour un nouvel element.uid donc les événements ne fonctionnent pas sauf si vous utilisez implicitement .cloneEvents()

vous ne faites parfois pas .clone() qui fonctionne car il prend l'élément ORIGINAL avec son stockage et ses événements.

suggestion envisager d'examiner event delegation. vous pourriez faire

formElement.addEvent("click:relay(label.myLabel)", function(e, el) { 
    alert("hi from "+ el.uid); 
}); 

cela signifie peu importe combien de nouveaux éléments que vous ajoutez, tant qu'ils sont de type label et la classe myLabel et les enfants de formElement, le clic toujours comme l'événement bulles au parent.