EN
jQuery - remove event with unbind method
6
points
In this article, we would like to show you how to remove events with unbind method using jQuery.
Note:
unbindmethod has been marked as depricated in jQuery 3.0 - it will be removed some day from API so it is recommended to useoffmethod instead. Article how to useoffmethod you can find here.
Quick solutions
// 1. Removing all events from element example
$('#my-element').unbind();
// 2. Removing all handlers for one event examples
$('#my-element').unbind('mouseover');
// 3. Removing specific hanadler for one event examples
$('#my-element').unbind('click', onClick);
Using jQuery it is possible to remove events in the following ways.
1. Removing all events from element example
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div {
padding: 10px;
background: yellow;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
<div id="my-element">Move mouse over or out...</div>
<br />
<button id="my-button">Remove all events</button>
<script>
$(document).ready(function() {
var element = $('#my-element');
var mouseoverCounter = 0;
var mouseoutCounter = 0;
function updateElement() {
var test = ' mouseover (' + mouseoverCounter + ');' +
' mouseout (' + mouseoutCounter + ');';
element.text(test);
}
element.bind('mouseover', function() {
mouseoverCounter += 1;
updateElement();
});
element.bind('mouseout', function() {
mouseoutCounter += 1;
updateElement();
});
$('#my-button').bind('click', function() {
element.unbind();
});
});
</script>
</body>
</html>
2. Removing all handlers for one event examples
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div {
padding: 10px;
background: yellow;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
<div id="my-element">Click me or move mouse over...</div>
<br />
<button id="my-mouseover-button">Remove all mouseover events</button>
<br /><br />
<button id="my-mouseout-button">Remove all mouseout events</button>
<script>
$(document).ready(function() {
var element = $('#my-element');
var mouseoverCounter = 0;
var mouseoutCounter = 0;
function updateElement() {
var test = ' mouseover (' + mouseoverCounter + ');' +
' mouseout (' + mouseoutCounter + ');';
element.text(test);
}
element.bind('mouseover', function() {
mouseoverCounter += 1;
updateElement();
});
element.bind('mouseout', function() {
mouseoutCounter += 1;
updateElement();
});
$('#my-mouseover-button').bind('click', function() {
element.unbind('mouseover');
});
$('#my-mouseout-button').bind('click', function() {
element.unbind('mouseout');
});
});
</script>
</body>
</html>
3. Removing specific handler for one event examples
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div {
padding: 10px;
background: yellow;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
<div id="my-element">Click me...</div>
<br />
<button id="my-click-1-button">Remove click 1 event</button>
<br /><br />
<button id="my-click-2-button">Remove click 2 event</button>
<script>
$(document).ready(function() {
var element = $('#my-element');
var click1Counter = 0;
var click2Counter = 0;
function updateElement() {
var test = 'click 1 (' + click1Counter + ');' +
' click 2 (' + click2Counter + ');';
element.text(test);
}
function onClick1() {
click1Counter += 1;
updateElement();
}
function onClick2() {
click2Counter += 1;
updateElement();
}
element.bind('click', onClick1);
element.bind('click', onClick2);
$('#my-click-1-button').bind('click', function() {
element.unbind('click', onClick1);
});
$('#my-click-2-button').bind('click', function() {
element.unbind('click', onClick2);
});
});
</script>
</body>
</html>