Easy Tutorial
❮ Sel Input Image Ajax Get ❯

jQuery on() Method

jQuery Event Methods

Example

Add a click event handler to the <p> element:

$(document).ready(function(){
  $("p").on("click", function(){
    alert("The paragraph was clicked.");
  });
});

Definition and Usage

The on() method attaches one or more event handlers for the selected elements and child elements.

Since jQuery version 1.7, the on() method is the new replacement for the bind(), live(), and delegate() methods. This method brings a lot of consistency to the API, and we recommend that you use this method, as it simplifies the jQuery code base.

Tip: To remove event handlers, use the off() method.

Tip: To add an event handler that only runs once and then removes itself, use the one() method.


Syntax

Parameter Description
event Required. Specifies one or more events or namespaces to add to the selected elements. <br> <br>Multiple event values can be separated by spaces, or be in an array. Must be a valid event.
childSelector Optional. Specifies that the event handler should only be attached to the specified child elements (and not to the selector itself, such as the deprecated delegate() method).
data Optional. Specifies additional data to pass to the function.
function Optional. Specifies the function to run when the event occurs.

More Examples

Replace bind() with on()

Replace delegate() with on()

Replace live() with on()

Add multiple event handlers

Add multiple event handlers using map parameter

Add custom events to elements

Pass data to the function

Add event handlers to future elements

Remove event handlers


jQuery Event Methods

❮ Sel Input Image Ajax Get ❯