Javascript – How to make live custom events in jQuery


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.

Best Solution

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.