5

我想动态添加一些预配置的 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 会忽略我的“事件”设置而注入不会。

提前致谢。

（对不起我的英语^^）

4

1 回答 1

5

你去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 元素及其存储和事件。

建议考虑调查事件委托。你可以做

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

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

于 2011-03-03T16:02:34.983 回答