Блог

бьюсь об это головой, и это начинает болеть.

У меня возникли проблемы с добавлением события к элементу. Я могу добавить событие, а затем немедленно вызвать его с помощью 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, элемент не реагирует на щелчок. стили зависают (курсор становится указателем при наведении курсора мыши), но событие не срабатывает. также пробовал наведение курсора мыши, но безрезультатно.

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

Редактировать—————-

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

в принципе, все узлы выбираются как «заменяемые», затем 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 устанавливается при инициализации ()
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;
},
  

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

отлаживать это непросто, когда вам не хватает содержимого / DOM.

первое — используете ли вы делегирование событий или у вас есть обработчики событий для родительского элемента, которые это делают 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 . может ли это быть проблемой стиля, как отображается элемент, встроенный? встроенный блок?

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

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

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

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

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