Mootools：注入vs採用

Question

我想用mootools動態添加一些預配置的HTML元素以使用'click'-event。

所以我可以使它與我的基本知識一起工作，雖然它不是非常漂亮。我這個編碼到目前爲止...

這是我的預配置的元素，具有一定的文字，一個類名和某些事件，因爲我渴望有事件已經增加，當it's插入我的容器：

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

這裏是我的功能，它增加了標籤的元素：

 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')); 
    */ 

      }); 
     } 

它採用注入也可以，但是在那裏，我的點擊事件，這觸發了「警報（‘點擊’）」的作品第二部分太。採用的方法不會在我的標籤對象中添加任何事件，當它插入到DOM中時。

任何人都可以幫助我。我只是想知道爲什麼adobt忽略我的「事件」設置並注入不會。

在此先感謝。

（對不起，我的英語^^）

Answer 1

你去label.clone().inject但row.adopt(label)而不是row.adopt(label.clone()) -

兩種方式。 .clone（）不會爲您提供cloneEvents - 您需要手動執行此操作。

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

這是它如何工作

至於爲什麼會這樣，事件被存儲在元存儲 - 這是每個元素獨一無二的。 mootools爲每個元素分配一個uid，例如label = 1，label.clone（） - > 2，label.clone（） - > 3等。

這會轉到Storage[1] = { events: ... }等等。克隆的元素，使新element.uid這樣的事件不會工作，除非你使用隱式.cloneEvents()

你有時不這樣做.clone()這工作，因爲它需要原始的元素與它的存儲以及大事件。

建議考慮調查event delegation。你可以做

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

這意味着無論你有多少新元素添加，只要它們是label類型和myLabel類和formElement兒童，點擊會一直工作作爲事件冒泡到父。