jQuery on() Method

jQuery Events

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

This also attaches the function to be run when the event occurs.

To remove an event handler, useoff()Method.

To attach an event that runs once and then removes itself, useone()Method.

Syntax:

$.on(event, childSelector, data, function)

Instance

Attach the click event to all <p> elements:

$("p").on("click", function() {
　　$.css("background-color", "coral");
});

Attach the mouseenter event to all <p> elements:

$("p").on("mouseenter", function() {
　　$.css("background-color", "coral");
});

Add multiple event handlers to the <div> element:

$("div").on("mouseenter mouseleave click", function() {
　　$.text(Math.random());
});

Pass data to the function:

$("document").ready(function(){
　　$("p").on("click", {msg: "you just clicked me!!!"}, showMsg)
});
function showMsg(event) {
　　$.append(event.data.msg);
});

UsagechildSelectorThe parameter attaches the click event to all <p> elements:

$("document").ready(function(){
　　$("body").on("click", "p", changeSize);
});

Remove the mousemove event from the <div> element:

$("button").click(function(){
　　$("div").off("mousemove");
});

Parameter Value

jQuery Events