Programming Microsoft ASP.NET 4 - Dino Esposito [479]
$(selector).click(function() {
...
});
Invoked without a callback, the same event functions produce the effect of invoking the current handler, if any are registered. The following code, for example, simulates the user’s clicking on a specific button:
$("#Button1").click();
You can achieve the same effect in a more generic way using the trigger function:
$("#Button1").trigger("click");
Event handlers receive a jQuery internal object—the Event object. This object provides a unified programming interface for events that goes hand in hand with the World Wide Web Consortium (W3C) recommendation, and it resolves discrepancies in the slightly different implementations provided by some browsers:
$("#Button1").click(function(evt) {
// Access information about the event
:
// Return false if you intend to stop propagation
return false;
});
The Event object features properties such as mouse coordinates, the JavaScript time of the event, which mouse button was used, and the target element of the event.
Note
In JavaScript, the time is expressed as the number of milliseconds elapsed from a fixed date—January 1, 1970.
Live Event Binding
Live binding is a nice feature of jQuery that allows you to keep track of event bindings for a given subset of DOM elements for the entire page lifetime. In other words, if you opt for live binding instead of plain binding, you are guaranteed that any new dynamically added elements that match the selector will automatically have the same handlers attached. You operate live binding through live and die functions. Here’s an example:
$(".specialButton").live("click", function() {
...
})
All buttons decorated with the specialButton CSS style are attached the given function as the handler for the click event. The difference between using live and bind (or specific event functions such as click) is that when live is used, any new DOM elements added to the page and decorated with the specialButton style automatically have the handler added. This won’t happen if bind is used. To stop live binding for some elements, you need to use the die function:
$(".specialButton").die("click");
Manipulating the DOM
The standard DOM provides a rich set of methods to create HTML trees dynamically. It turns out, however, that in nearly all browsers the performance of native DOM objects is poor compared to using the innerHTML property, which is not officially part of the DOM standard. While functions and objects to neatly compose a piece of HTML are great things to have, the ability to select a plain chunk of HTML and get the resulting DOM tree is even more compelling. In jQuery, you find an API that supports both approaches.
Creating a DOM Tree
The simplest way to create a new DOM tree in jQuery consists of passing an HTML string to the jQuery (or $) function, as shown here:
// Represents a DOM tree with a UL list and two child LI elements
$("
- One
- Two ");
You can also indicate style information, event handlers, and set attributes. The following example returns a DIV element with some inner text, a CSS class, and a click handler:
$("
", {class: "panel",
text: "Click me!",
click: function() {
$(this).toggleClass("extra");
}
}
);
The DOM you created in this way is not part of the page yet. To add it to the existing page DOM, an additional step is required.
Adding Elements to the DOM
The jQuery library defines a bunch of functions to insert the DOM tree resulting from a piece of HTML somewhere in the existing DOM. The following code shows how to insert a dynamically created image after each element in the wrapped set. The wrapped set includes all LI child elements of a UL element identified by name:
$("#ShoppingList li").after("
");
The function after inserts the DOM tree (specified via plain HTML text) after any matching element in the set. Other available functions