Using event delegation to attach events to future controls

This recipe demonstrates event delegation and event bubbling. By adding elements at runtime, we will also demonstrate how delegation helps you attach events to future controls. The constructs used in this example are as follows:

Construct	Type	Description
$("html_tag")	jQuery selector	This selects all elements with the specified HTML tag.
.addClass()	jQuery method	This adds the specified CSS class to each matched element.
.append()	jQuery method	This attaches elements at the end of each matched element.
[attribute= "value"]	jQuery selector	This selects an element with the specified attribute equal to the value string.
click	jQuery event	This is fired when you click on an element. It corresponds to the JavaScript click event.
dblclick	jQuery event	This is fired when you double-click on an element is. It corresponds to the JavaScript dblclick event.
.on()	jQuery event binder ...