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?

cleaned up grammar, added reference to `live`, added javascript tag — artlung, Jan 22 '10 at 15:09
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: http://pastebin.com/HZ4cDLU6 — lock, Dec 16 '10 at 03:20
ooops here's the right link for that one http://pastebin.com/FP51K91F — lock, Dec 16 '10 at 03:27

score 7 · Accepted Answer · answered Jan 21 '10 at 14:14

7

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

answered Jan 21 '10 at 14:14

anomareh

5,294
4
25
22

Under this code, the return false; blocks the default event (ie. click) from firing if it doesn't match the selector. Suggest this modification: `if (t.match(selector)) fn.apply(t, [e]);` though still not ideal as an extra event with no effect gets bound to the elements unnecessarily. – Brian Hogg Aug 08 '11 at 22:21
@DimitarChristoff did you even read the question? You linked to v1.4.2 docs. – anomareh Dec 09 '11 at 00:44
oh doh. sorry, supporting a framework that's 4+ yrs old tends to slip my mind at times. to be fair, the lack of event delegation is the least of the concerns one may have when trying to use 1.11... – Dimitar Christoff Dec 09 '11 at 11:59
@DimitarChristoff as true as that may be, in all fairness, that's relevant to this question how? :/ You might also notice this question _(and answer)_ are almost 2 years old. – anomareh Dec 09 '11 at 16:25
it got linked from a new question as 'already answered' hence I stumbled upon it, i am not routinely digging up graves or anything – Dimitar Christoff Dec 10 '11 at 01:06

score 1 · Answer 2 · edited Dec 08 '12 at 10:37

1

You can use this way:

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

edited Dec 08 '12 at 10:37

Irfan

7,029
3
42
57

answered Nov 05 '12 at 20:06

Idealmind

1,278
15
8

score 1 · Answer 3 · answered Jan 31 '10 at 13:24

1

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

answered Jan 31 '10 at 13:24

Sean Hogan

2,902
24
22

I think document.body is the whole document, no? – Teej Mar 05 '10 at 01:43
That is true but irrelevant because anomareh's code only checks if the event target matches the selector, whereas jQuery's `live()` also checks ancestors of the event target. – Sean Hogan Mar 12 '10 at 11:51

score 1 · Answer 4 · edited Feb 15 '12 at 05:59

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.

how to implement a jQuery live bind event on mootools?

4 Answers4

Linked