mootools - использовать addEvent, чтобы элемент не работал должным образом? - PullRequest
Новая
       28

mootools - использовать addEvent, чтобы элемент не работал должным образом?

4 голосов
/ 11 июня 2011

бьется мне в голову об этом, и это начинает болеть.

У меня проблемы с добавлением события в элемент. Я могу добавить событие и сразу вызвать его с помощью element.fireEvent ('click'), но как только элемент присоединен к DOM, он не реагирует на щелчок.

пример кода: 

var el = new Element('strong').setStyle('cursor','pointer');
el.addEvent('click',function () { alert('hi!'); });
el.replaces(old_element); // you can assume old_element exists
el.fireEvent('click'); // alert fires

однако, как только я присоединяю это к DOM, элемент не реагирует на щелчок. Стили придерживаются (курсор - указатель, когда я нахожу курсор мыши), но никакое событие не запускается. попробовал навести курсор мыши, но безрезультатно.

есть какие-нибудь подсказки здесь? я пропускаю что-то основное? Я делаю это повсеместно, но в данном случае это не работает.

EDIT ----------------

хорошо, вот еще немного кода. к сожалению, я не могу раскрыть реальный код, так как он предназначен для проекта, который все еще находится под жестким контролем.

в основном, все узлы выбираются как «заменяемые», тогда json, найденный в атрибуте rel = «», устанавливает этап, на который он должен быть заменен. В данном конкретном случае заменяемый элемент - это имя пользователя, которое должно отображать некоторую информацию при нажатии.

еще раз, если я запускаю событие непосредственно после его прикрепления, все хорошо, но элемент не реагирует на щелчок после его прикрепления.

HTML ----------- 

<p>Example: <span class='_mootpl_' rel="{'text':'foo','tag':'strong','event':'click','action':'MyAction','params':{'var1': 'val1','var2': 'val2'}}"></span></p>

JAVASCRIPT ----- допущения: 1. ниже две функции являются частью большего класса 2. ROOTELEMENT устанавливается в initialize () 3. MyAction определяется до того, как будет выполнен любой синтаксический анализ (и правильно обрабатывается в тесте .fireEvent ()) 

parseTemplate: function() {
    this.ROOTELEMENT.getElements('span._mootpl_').each(function(el) {
        var _c = JSON.decode(el.get('rel'));
        var new_el = this.get_replace_element(_c); // sets up the base element
        if (_c.hasOwnProperty('event')) {
            new_el = this.attach_event(new_el, _c);
        }
    });
},

attach_event: function(el, _c) {
    el.store(_c.event+'-action',_c.action);
    el.store('params',_c.params);
    el.addEvent(_c.event, function() {
        eval(this.retrieve('click-action') + '(this);');
    }).setStyle('cursor','pointer');
    return el;
},

Ответы [ 2 ]

4 голосов
/ 11 июня 2011

Работает просто отлично.Контрольный пример: http://jsfiddle.net/2GX66/

2 голосов
/ 11 июня 2011

отладка это не легко, когда вам не хватает контента / DOM.

first - вы используете делегирование событий или имеете обработчики событий для родительского / родительского элемента, которые делают event.stop()?

если это так, заменить на event.preventDefault()

Второе, что нужно сделать. не заменяйте элемент, но поместите его где-нибудь еще в DOM - как первый узел document.body и посмотрите, работает ли он там.

если это работает в другом месте, см. # 1

хотя я понимаю, что вы сказали «пример кода», вы должны написать это как: 

new Element('strong', {
    styles: {
        cursor: "pointer"
    },
    events: {
        click: function(event) {
            console.log("hi");
        }
    }
}).replaces(old_element);

бессмысленно делать 3 отдельных оператора и сохранять ссылку, если вы не собираетесь использовать ее повторно. Вы действительно должны показать фактический код, если вам нужен совет. в этом фрагменте вы даже не устанавливаете текст содержимого, поэтому элемент не будет отображаться, если он inline. Может ли это быть проблема стиля, что такое дисплей на элементе, встроенный? встроенный блок?

можете ли вы назначить ему класс, который меняет его на псевдо: hover, и посмотреть, как он это делает? заметьте, вы говорите, что курсор придерживается, что означает, что вы можете навести на него курсор мыши - следовательно, css работает. это также исключает возможность наличия каких-либо элементов подкладки above it / прозрачных элементов, которые могут предотвратить возникновение события.

наконец. присвойте ему идентификатор в процессе разработки. назначить событие родительскому элементу с помощью:

parentEl.addEvent("click:relay(strong#idhere)", fn);

и посмотрите, работает ли он таким образом (вам нужно Element.delegate от mootools-more)

удачи, должен любить странные проблемы - делает нашу работу стоящей. было бы не самым плохим опубликовать URL или JSFIDDLE ...

...