how to implement a jQuery live bind event on mootools?

问题

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?

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

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

回答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.

回答4:

You can use this way:

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

来源：https://stackoverflow.com/questions/2107892/how-to-implement-a-jquery-live-bind-event-on-mootools

标签

javascript

jquery

dom

mootools