How do I make elements that are loaded via ajax, adopt the events associated with the same class on mootools 1.11?

As far as I know, in jQquery, if your ajax response consists of something like <div class='button'>,
if there is an event bind using live to $('.button'), those events would automatically bind.

Is that possible with MooTools 1.11?

How do I make elements that are loaded via ajax, adopt the events associated with the same class on mootools 1.11?

As far as I know, in jQquery, if your ajax response consists of something like <div class='button'>,
if there is an event bind using live to $('.button'), those events would automatically bind.

Is that possible with MooTools 1.11?

• javascript
• jquery
• dom
• mootools

• cleaned up grammar, added reference to live, added javascript tag – artlung Commented Jan 22, 2010 at 15:09
• Hi lock. Did you manage to get this working in 1.11? – denormalizer Commented Dec 14, 2010 at 0:38
• sorry for the late response. Anyway, yes i did manage to get it working, though i can't provide a link to the site where i used it because it's domain / hosting has expired already. i can provide a code snippet but its almost similar to the accepted answer except that its written of course for 1.11. here's a link: pastebin./HZ4cDLU6 – lock Commented Dec 16, 2010 at 3:20
• ooops here's the right link for that one pastebin./FP51K91F – lock Commented Dec 16, 2010 at 3:27

4 Answers 4

Perhaps something like this might do what you're looking for? Though I'm not sure if it'll work with 1.11.

Element.implement({
    addLiveEvent: function(event, selector, fn){
        this.addEvent(event, function(e){
            var t = $(e.target);

            if (!t.match(selector)) return false;
                fn.apply(t, [e]);
        }.bindWithEvent(this, selector, fn));
    }
});

$(document.body).addLiveEvent('click', 'a', function(e){ alert('This is a live event'); });

anomareh is on the right track.

You would also want to check the ancestor elements of the event target.

I'm not sure if this works with all events since some of them do not bubble (not sure how Mootools handles this).

This is very cool idea, jQuery .live() works in similar way, but there is also problem with bubbling. If some parent has attached stopPropagation() for this event nothing happens.

I think the ideal solution is building custom events, here is very good post about custom events written by Nicholas Zakas:

http://www.nczonline/blog/2010/03/09/custom-events-in-javascript/

But this example doesn't have event bubbling implemented yet. Some kind of bubbling which has fallback for it's prevention should solve the problem.

You can use this way:

$(document.body).addEvent('click:relay(.filterButton)', function(){
// do something
});