Mootools: inyectar vs adoptar

Question

Quiero agregar dinámicamente algunos elementos HTML preconfigurados en el uso de un evento 'clic' con mootools.

Así puedo hacerlo funcionar con mis conocimientos básicos, aunque no es muy ingenioso. Codifiqué esto hasta ahora ...

Ésta es mi elemento preconfigurado, con un poco de texto, un nombre de clase y algún evento, porque yo quiero tener eventos ya añaden, cuando Está insertan en mi contenedor:

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

Aquí es mi función, lo que añade la etiqueta-Elemento:

 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 segunda parte, que utiliza inyectar también funciona, pero no, mi, haga clic en eventos, que dispara la "alerta ('clic')" obras también. El método con adopt no agrega ningún evento a mi etiqueta Object, cuando se inserta en el dom.

¿Alguien me puede ayudar con esto. Solo quiero saber por qué adobt ignora mi configuración de "eventos" e inyecta no.

Gracias de antemano.

(lo siento por mi Inglés ^^)

Answer 1

que van label.clone().inject pero row.adopt(label) y no row.adopt(label.clone()) -

de cualquier manera. .clone() no es cloneEvents para usted; debe hacerlo manualmente.

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

esto es cómo va a funcionar

cuanto a por qué esto es, los eventos se almacenan en el almacenamiento de elementos - que es único por elemento. mootools asigna un uid a cada elemento, por ejemplo, label = 1, label.clone() -> 2, label.clone() -> 3 etc.

va a Storage[1] = { events: ... } y así sucesivamente. la clonación de un elemento hace que para una nueva element.uid para que los eventos no funcionan a menos que implícitamente utiliza .cloneEvents()

que a veces no está haciendo .clone() que funciona porque toma el elemento original, junto con su almacenamiento y eventos.

sugerencia considere investigar event delegation. que podría hacer

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

esto significa que no importa cuántos nuevos elementos se agrega, siempre y cuando que son de tipo label y la clase myLabel e hijos de formElement, el clic siempre funcionará como el evento se propaga a los padres.