|
.off( "Event_Name", [ Listener_fn_reference or Event_ID ] ) - Detach an event
Events can be removed from HTML elements ($.Objs) using ".off()" function in 3 different ways.
Parameters
Example 1
Removing all "click" events from a div tag. For this second parameter should not be provided.
JS
HTML
CSS
$.domLoaded(function() {
//Attach 2 "click" events to div
$.get("div").on("click", function() {
alert("First Event Trigger");
});
$.get("div").on("click", function() {
alert("Second Event Trigger");
});
// Turn OFF all click events registered with div element
$.get("#off").on("click", function() {
$.get("div").off("click");
});
});
Result
Example 2
Removing a specific "click" event from a div tag using Event ID
JS
HTML
CSS
$.domLoaded(function() {
//Attach 2 "click" events to div and store the event IDs
var ev1 = $.get("div").on("click", function() {
alert("First Event Trigger");
});
var ev2 = $.get("div").on("click", function() {
alert("Second Event Trigger");
});
// Turn OFF first click event using event ID
$.get("#off").on("click", function() {
$.get("div").off("click", ev1);
});
});
Result
Example 3
Removing a specific "click" event from a div tag using listener function reference
JS
HTML
CSS
$.domLoaded(function() {
//Attach 2 "click" events to div and store the event IDs
var listen = function() {
alert("First Event Trigger");
}
$.get("div").on("click", listen);
var ev2 = $.get("div").on("click", function() {
alert("Second Event Trigger");
});
// Turn OFF first click event using function reference
$.get("#off").on("click", function() {
$.get("div").off("click", listen);
});
});
Result
| ||||||||||||||||
|
|