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.
xxxxxxxxxx1
// 1. Removing all events from element example2
$('#my-element').unbind();3
4
// 2. Removing all handlers for one event examples5
$('#my-element').unbind('mouseover');6
7
// 3. Removing specific hanadler for one event examples8
$('#my-element').unbind('click', onClick);Using jQuery it is possible to remove events in the following ways.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
div {7
padding: 10px;8
background: yellow;9
}10
11
</style>12
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>13
</head>14
<body>15
<div id="my-element">Move mouse over or out...</div>16
<br />17
<button id="my-button">Remove all events</button>18
<script>19
20
$(document).ready(function() {21
22
var element = $('#my-element');23
24
var mouseoverCounter = 0;25
var mouseoutCounter = 0;26
27
function updateElement() {28
var test = ' mouseover (' + mouseoverCounter + ');' +29
' mouseout (' + mouseoutCounter + ');';30
31
element.text(test);32
}33
34
element.bind('mouseover', function() {35
mouseoverCounter += 1;36
37
updateElement();38
});39
40
element.bind('mouseout', function() {41
mouseoutCounter += 1;42
43
updateElement();44
});45
46
47
$('#my-button').bind('click', function() {48
element.unbind();49
});50
});51
52
</script>53
</body>54
</html>xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
div {7
padding: 10px;8
background: yellow;9
}10
11
</style>12
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>13
</head>14
<body>15
<div id="my-element">Click me or move mouse over...</div>16
<br />17
<button id="my-mouseover-button">Remove all mouseover events</button>18
<br /><br />19
<button id="my-mouseout-button">Remove all mouseout events</button>20
<script>21
22
$(document).ready(function() {23
24
var element = $('#my-element');25
26
var mouseoverCounter = 0;27
var mouseoutCounter = 0;28
29
function updateElement() {30
var test = ' mouseover (' + mouseoverCounter + ');' +31
' mouseout (' + mouseoutCounter + ');';32
33
element.text(test);34
}35
36
element.bind('mouseover', function() {37
mouseoverCounter += 1;38
39
updateElement();40
});41
42
element.bind('mouseout', function() {43
mouseoutCounter += 1;44
45
updateElement();46
});47
48
49
$('#my-mouseover-button').bind('click', function() {50
element.unbind('mouseover');51
});52
53
$('#my-mouseout-button').bind('click', function() {54
element.unbind('mouseout');55
});56
});57
58
</script>59
</body>60
</html>xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
div {7
padding: 10px;8
background: yellow;9
}10
11
</style>12
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>13
</head>14
<body>15
<div id="my-element">Click me...</div>16
<br />17
<button id="my-click-1-button">Remove click 1 event</button>18
<br /><br />19
<button id="my-click-2-button">Remove click 2 event</button>20
<script>21
22
$(document).ready(function() {23
24
var element = $('#my-element');25
26
var click1Counter = 0;27
var click2Counter = 0;28
29
function updateElement() {30
var test = 'click 1 (' + click1Counter + ');' + 31
' click 2 (' + click2Counter + ');';32
33
element.text(test);34
}35
36
function onClick1() {37
click1Counter += 1;38
39
updateElement();40
}41
42
function onClick2() {43
click2Counter += 1;44
45
updateElement();46
}47
48
element.bind('click', onClick1);49
element.bind('click', onClick2);50
51
52
$('#my-click-1-button').bind('click', function() {53
element.unbind('click', onClick1);54
});55
56
$('#my-click-2-button').bind('click', function() {57
element.unbind('click', onClick2);58
});59
});60
61
</script>62
</body>63
</html>