Mootools：注入与采用

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')”也有效。当我的标签对象插入 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()，因为它使用 ORIGINAL 元素及其存储和事件。

建议考虑查看event delegation。你可以这样做

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

这意味着无论您添加多少新元素，只要它们是label 类型和myLabel 类以及formElement 的子元素，单击将始终在事件冒泡到父元素时起作用。