how to implement a jQuery live bind event on mootools?

Question

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?

Answer 1

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'); });

Answer 2

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).

Answer 3

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.net/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.

Answer 4

You can use this way:

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