Mootools: впрыскивать против принятия - PullRequest
Новая
       17

Mootools: впрыскивать против принятия

5 голосов
/ 03 марта 2011

Я хочу динамически добавлять некоторые предварительно сконфигурированные HTML-элементы при использовании события «click» с 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') "тоже работает.Метод с accept не добавляет никакого события в мой ярлык Object, когда он вставлен в dom.

Может кто-нибудь помочь мне с этим.Я просто хочу знать, почему adobt игнорирует мои настройки "events", а inject - нет.

Заранее спасибо.

(извините за мой английский ^^)

1 Ответ

5 голосов
/ 03 марта 2011

вы идете 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, щелчок всегда будет работать, поскольку событие всплывает к родительскому элементу.

...