Add event to dynamically generated element

Question

How can I add an event to an element which was loaded by AJAX.

jQuery has live, but what's the Mootools equivalent?

For example:

window.addEvent('domready', function() {
    // some code which loads new elements by ajax

    // Filter
    $$('.filterButton').addEvent('click', function(event) {
        alert('wow');
    });
});

possible duplicate of [how to implement a jQuery live bind event on mootools?](http://stackoverflow.com/questions/2107892/how-to-implement-a-jquery-live-bind-event-on-mootools). Are you searching before posting a question? Putting the words `mootools jquery live equivalent` into the google's search box gives you the answer right away. And unsurprisingly it is on StackOverflow :-) I mean it takes about 10 seconds to do that, probably even less if you have a shortcut to open and search google. — Darin Dimitrov, Dec 08 '11 at 17:15
that answer is very much out of date so just as well that he asked. — Dimitar Christoff, Dec 08 '11 at 17:23

Dimitar Christoff · Answer 1 · 2011-12-08T19:22:13.500

the mootools equivalent is via delegatorElement.addEvent("event:relay(mask)", fn); where event can be standard bubbling (click, mouseover/out/leave/enter etc) or non-bubbling (blur, focus, change etc).

in your code that goes as:

$(document.body).addEvent("click:relay(.filterButton)", function(event, element) {
    console.log(event, element === this); // event obj, true
});

it's better to add the event to an element higher up the dom, like document.id("delegatorId")

more here:

http://mootools.net/docs/core/Element/Element.Delegation

keep in mind, event delegation is in mootools-core since 1.4 - it used to be in mootools-more before that, which means a custom build.

Add event to dynamically generated element

1 Answers1