Using "on" and "off" events in App Cloud

The latest version of the App Cloud SDK includes jQuery 1.7, which introduces new methods for handling events.

Background

Prior to version 1.7, jQuery gave us a handful of ways to handle events. You're probably familiar with the bind method:

$("li").bind("click", function (evt) {
    // do stuff
});

Above, we're binding an anonymous callback function to every li element in the document. The callback function has one argument (an object) that contains all the properties of the captured event. It's simply a shorthand for the following:

var elems = document.querySelectorAll("li");

for (var i = 0; i < elems.length; i++) {
    elems[i].addEventListener("click", function (evt) {
        // do stuff
    });
}

The jQuery version is nicer, don't you think?

The bind method works on elements that already exist in the document. But what if the elements don't exist yet? Enter the live method:

$("li").live("click", function (evt) {
    // do stuff
});

The live method works on matched elements now or in the future by attaching a single event listener to the document root element and then inspecting the event data to determine which specific handlers to trigger. Pretty handy. The delegate method works in a similar fashion, although you can specify a scope:

$("ul").delegate("li", "click", function (evt) {
    // do stuff
});

Each of these methods has a corresponding function to remove event listeners:

bind: unbind
live: die
delegate: undelegate

New in jQuery 1.7

In jQuery 1.7, all the above methods are replaced with on and off. There are two ways to use on:

$("#dataTable tbody tr").on("tap", function (evt) {
    // do stuff
});

$("#dataTable tbody").on("tap", "tr", function (evt) {
    // do stuff
});

The first technique is like using bind; the second technique is like using delegate and is more efficient when working with large DOM trees.

The best place to learn more about these methods is the jQuery API itself.

Now get on it!