javascript

[Jquery] Using jquery events

The jQuery library includes a nice event-handling system that supports all the underlying JavaScript events but makes them easier to use, consistent between browsers, and compatible with selectors.

Example:

/// <reference path="jquery-1.8.2.js" />
$(document).ready(function () {
    $('tr').prepend("<td></td>");
    $('<input name="delete" type="radio"/>').prependTo('tbody td:first-child')
        .first().attr("checked", true);
    $(':button').bind("click", function (e) {
        $(':radio:checked').closest('tr').remove();
        $(':radio').first().attr("checked", true);
    });
});

The bind function takes two arguments—the name of the event that we want to handle and the function that will be executed when the event arises. We call the bind function on a jQuery collection, which has the effect of setting up the event handler on all of the selected elements.

In the example, we use the bind function to listen for the click event from all elements that are matched by the :button filter.

In our handler function, we select the checked radio button, use the closest function to find the nearest tr ancestor, and call the remove function to remove the row from the table. The effect is that clicking the Delete button removes the row whose radio button is checked.

After we have deleted the row, we find the first radio button in the document and set the checked attribute to true, so that subsequent button clicks will delete the first row in the table.

Selected jquery event-handler functions

  • click Corresponds to the click event, triggered when the user presses and releases the mouse
  • dblclick Corresponds to the dblclick event, triggered when the user presses and releases the mouse twice in quick succession
  • mouseenter Corresponds to the mouseenter event, triggered when the mouse enters the region of screen occupied by an element
  • mouseleave Corresponds to the mouseleave event, triggered when the mouse leaves the region of screen occupied by an element
  • change Corresponds to the change event, triggered when the value of an element changes
  • select Corresponds to the select event, triggered when the user selects the element value
  • submit Corresponds to the submit event, triggered when the user submits a form

We can rewrite the above example so we use click function instead of bind:

/// <reference path="jquery-1.8.2.js" />
$(document).ready(function () {
    $('tr').prepend("<td></td>");
    $('<input name="delete" type="radio"/>').prependTo('tbody td:first-child')
        .first().attr("checked", true);
    $(':button').click(function (e) {
        $(':radio:checked').closest('tr').remove();
        $(':radio').first().attr("checked", true);
    });
});

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s