HTML and CSS Reference
In-Depth Information
Naturally this works for the three rows that were in the table when the page loaded. If you
want to prove that this approach works for rows added directly to the DOM, you can add a
new row to the table with the following code:
$('#tblTasks tbody tr:first' ).clone().insertAfter('#tblTasks tbody tr:last')
This code will select the first row from the table, clone it, to create a new row, and then
insert it after the last row in the table. You will be able to then delete this row from the table
using its delete button, without having to add an event listener explicitly to the button.
Earlier versions of jQuery used a function called live to add dynamic event
listeners. This function has been deprecated and should not be used.
So far we have concentrated on click events. There are many other events that can be
listened for with jQuery. The following are the other common events, all of which work in
the same basic way:
• dblclick : is invoked when an element is clicked twice in quick succession.
• hover : is invoked when the mouse hovers over the element.
• mousedown : is invoked when the mouse button is pressed, and before the button is re-
• mouseup : is invoked when the mouse button is released.
• keypress : is invoked each time the user types a key into an element, such as a text field.
• keydown : is invoked when the user presses a key, but before the output is reflected on
screen. This allows you to veto the action with preventDefault.
• blur : is invoked when the focus leaves a form field. This is useful when you wish to val-
idate content after the user has finished typing.
• change : is invoked when the value of a form field changes.
• focus : is invoked when the form field receives focus.
For a complete list of events, see the jQuery documentation.
Before finishing this section, we will make a minor change to ensure that our event hand-
lers are not added before the DOM has been fully constructed. Ideally we want to start pro-
cessing scripts after the DOM has been constructed, even if all resources (such as images)
have not been loaded. Due to the way JavaScript works, it is possible that it will begin
Search WWH ::

Custom Search