Mootools - using addEvent for an element not working properly?

Question

bangin 'my head is against it and it starts to hurt.

I am having trouble adding an event to an element. I can add an event and then immediately fire it using element.fireEvent ('click'), but as soon as the element is attached to the DOM, it does not respond to a click.

code example:

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 

however, as soon as I attach this to the DOM, the element does not respond to a click. stick styles (the cursor is a pointer when you hover over the mouse), but no event fires. I tried the mouse manipulator, but to no avail.

any clues here? Did I miss something? I do this everywhere, but in this case it does not work.

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

ok here is another code. Unfortunately, I cannot expose the real code, as this is for a project that is still under tight wrappers.

basically, all nodes are perceived as "replaceable", then the json found in the rel = "" attribute creates the basis for why it should be replaced. In this particular case, the replaced item is the username that should cause some information when clicked.

again, if I fire the event immediately after adding it, everything is fine, but the element does not respond to a click after attaching it.

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

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

JAVASCRIPT ----- assumptions: 1. The two functions below are part of a larger class 2. ROOTELEMENT is set during initialization () 3. MyAction is determined before parsing occurs (and correctly processed in the .fireEvent () test).

 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; }, 

Answer 1

It works well. Test case: http://jsfiddle.net/2GX66/

Answer 2

debugging is not easy when you are missing content / DOM.

first - do you use event delegation or have event handlers in the parent / parent element that event.stop() does?

if so replace with event.preventDefault()

second subject. don't replace the element, but put it somewhere else in the DOM - like document.body first node and see if it works there.

if it works elsewhere, see # 1

although I believe you said "sample code", you should write this as:

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

it makes no sense to make 3 separate statements and save the link if you are not going to reuse it. you really should show ACTUAL code if you need advice. in this snippet you don’t even set the content text, so the element will not be displayed if it is inline . Could this be a style issue, what is display on an element, inline? built-in unit?

can you assign it a class that will change it in the pseudo-view: hover pseudo and see how it does it? remember, you say that the cursor sticks mean you can hover over it - hence css works. this also eliminates the possibility of having any paddings of the elements above it / transparent els that might interfere with the event bubble.

eventually. give it an identifier during the creation process. assign an event to the parent element via:

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

and see if it works like this (you need Element.delegate from mootools-more)

Good luck, you need to love strange problems - makes our work a decent job. it would not be the worst to send a url or jsfidde too ...