How to make live custom events in jQuery

Question

jQuery has a really handy event binder called live() which will add events to DOM elements on the fly (even for the elements that will be added later to the DOM). The problem is that it's only working on specific events (listed here in documentation).

I really want to have live events for focus,blur and change which is not supported by live right now. Besides, if I can make live custom events, it will be big game changer for my app. Most of the code that I have right now is dedicated to rebinding old events (change, focus, and custom events for making items draggable or resizable) to new dom elements that have been added through ajax.

Any idea? I guess event delegation is the way to go, but I right now it'll make the code more complicated. Maybe a plugin that handle event delegations... not sure. Help me find a solution.

Answer 1

If it's not in jQuery there is most likely a reason. Browser bugs etc that make it unreliable. I would wait until they implement it or try using the original plugin that became live http://docs.jquery.com/Plugins/livequery

Edit:

Nice downvote guys. There is a reason it's not in jQuery and I highly doubt it's because they're lazy. I've actually spent time reading the source and looking for why only certain events are implemented in live() and I can't find why. So if someone knows ... please enlighten us.

Answer 2

I've successfully used livequery plugin as a complement to .live() function in jQuery. Not only can it bind events like focus,blur and change (that live() does not support yet, as of 1.3.2) but also it provides you with a mechanism to bind custom events to DOM elements on the fly. For example, I used it to bind draggable and droppables to some DOM elements which will be added through Ajax. It makes my code much simpler to read and easier to maintain.

Answer 3

jQuery's live() method won't work because the focus and blur events don't propagate (bubble) like other DOM events. The jQuery team will eventually introduce this functionality but it will have to be artificial (manual bubbling).

If I wasn't using jQuery and still wanted the benefits of live() I would use event capturing in browsers that supported it (most non-IE browsers) and in IE I would use their onFocusIn/onFocusOut events (these events, unlike focus/blur, do bubble).

Here's an example:

function onFocus(el, fn) {
    var outerFn = function(e) {
        e = e || window.event;
        if ((e.target || e.srcElement) === el) {
            fn.call(el);
        }
    };
    if (document.body.addEventListener) {
        // This is event capturing:
        document.body.addEventListener('focus', outerFn, true);
    } else {
        // This is event delegation:
        document.body.attachEvent('onfocusin', outerFn);
    }
    return outerFn;
}

Using it:

onFocus(document.getElementById('myInputField'), function(){
    log('FOCUSED!!!');
});

A similar abstraction could be used for blur and change events.

Read more about event order (capturing/bubbling) here: http://www.quirksmode.org/js/events_order.html

---

It might also be worth noting that liveQuery, the jQuery plugin, works because it re-binds the event to new elements; it only works with jQuery's DOM manipulation methods like 'append', 'insertBefore' etc. So if you were to add a new element without using jQuery it wouldn't work.

Answer 4

You may want to check out Ariel Flesley's jQuery.Listen plugin. It's similar to the live() events and livequery() plugin, but it support's focus() and blur() events.

http://flesler.blogspot.com/2007/10/jquerylisten.html

Answer 5

This functionality is now available in jQuery 1.4. live() now supports all JavaScript events (including custom events), and the focusin and focusout events have been introduced as bubbling versions of focus and blur.

From the jQuery 1.4 documentation on .live():

As of jQuery 1.4, the .live() method supports custom events as well as all JavaScript events. Two exceptions: Since focus and blur aren't actually bubbling events, we need to use focusin and focusout instead.