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

            });
        }

使用注入的第二部分也有效，但在那里，我的click-Event，它会激活“alert（'click'）”。采用的方法不会在我的标签Object中添加任何事件，当它插入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);

这是如何运作的

至于为什么，事件存储在Element存储中 - 每个元素都是唯一的。 mootools为每个元素分配一个uid，例如label = 1，label.clone（） - ＆gt; 2，label.clone（） - ＆gt; 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类和类myLabel以及formElement的子元素，点击将始终作为事件发挥作用气泡给父母。

Mootools：注入vs采用

1 个答案: