Mootools:注入vs采用

Question

我想动态添加一些预先配置的HTML元素,使用mootools的'click'事件.

因此,我可以使用我的基本知识,虽然它不是很漂亮.我到目前为止编码了这个......

这是我预先配置的元素,包含一些文本,一个类名和一些事件,因为我想要添加事件,当它插入我的容器时:

        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时,采用的方法不会向我的标签Object添加任何事件.

谁能帮我这个.我只是想知道为什么adobt忽略了我的"事件"设置而没有注入.

提前致谢.

(对不起我的英文^^)

Answer 1

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

无论哪种方式..clone()不会为您克隆事件 - 您需要手动执行此操作.

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

这是它的工作方式

至于为什么,事件存储在Element存储中 - 每个元素都是唯一的.mootools为每个元素分配一个uid,例如label = 1,label.clone() - > 2,label.clone() - > 3等.

这种Storage[1] = { events: ... }情况等等.克隆一个元素会产生一个新的element.uid,所以除非你隐式使用,否则事件不起作用.cloneEvents()

你有时候没做.clone()什么工作,因为它带有ORIGINAL元素及其存储和事件.

建议考虑调查事件授权.你能做到的

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

这意味着无论您添加多少新元素,只要它们是类型label和类myLabel以及子元素formElement,单击将始终作为事件气泡到父级.