events - Mootools:注入(inject)与采用

Question

我想动态添加一些预配置的 HTML 元素，以使用带有 mootools 的“点击”事件。

所以我可以用我的基本知识让它工作，虽然它不是很漂亮。到目前为止，我对此进行了编码...

这是我的预配置元素，带有一些文本、类名和一些事件，因为我想在将事件插入我的容器时添加事件:

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

            });
        }

使用注入(inject)的第二部分也可以工作，但是在那里，我的 click-Event 触发“alert('click')”也可以工作。当它插入到dom中时，采用的方法不会向我的标签对象添加任何事件。

谁能帮我这个。我只是想知道为什么adobt 会忽略我的“事件”设置而注入(inject)不会。

提前致谢。

(对不起我的英语^^)

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()之所以有效，是因为它采用 ORIGINAL 元素及其存储和事件。

建议考虑调查 event delegation .你可以做

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

这意味着无论您添加多少新元素，只要它们的类型为 label和类(class) myLabel和 formElement 的 child ，单击将始终作为事件向父级冒泡。