EN
jQuery - remove event with off method
5 points
In this article, we would like to show you how to remove events with off method using jQuery.
Note:
offmethod has been introduced in jQuery 1.7.
xxxxxxxxxx1
// 1. Removing all events from element example2
$('#my-element').off();3
4
// 2. Removing all handlers for one event examples5
6
// 2.1. Example 1 - directly from element7
$('#my-element').off('mouseover');8
9
// 2.2. Example 2 - children filtered by selector10
$('body').off('mouseover', '.my-element');11
12
// 3. Removing specific hanadler for one event examples13
14
// 3.1. Example 1 - directly from element15
$('#my-element').off('click', onClick);16
17
// 3.2. Example 2 - children filtered by selector 18
$('body').off('click', '.my-element', onClick);19
20
// 4. Removing few events example21
22
// 4.1. Example 1 - directly from element23
$('#my-element').off('mouseover mouseout');24
// $('#my-element').off('mouseover mouseout', onMouse);25
26
// 4.2. Example 2 - children filtered by selector 27
$('body').off('mouseover mouseout', '.my-element');28
// $('body').off('mouseover mouseout', '.my-element', onMouse);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.on('mouseover', function() {35
mouseoverCounter += 1;36
37
updateElement();38
});39
40
element.on('mouseout', function() {41
mouseoutCounter += 1;42
43
updateElement();44
});45
46
47
$('#my-button').on('click', function() {48
element.off();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.on('mouseover', function() {37
mouseoverCounter += 1;38
39
updateElement();40
});41
42
element.on('mouseout', function() {43
mouseoutCounter += 1;44
45
updateElement();46
});47
48
49
$('#my-mouseover-button').on('click', function() {50
element.off('mouseover');51
});52
53
$('#my-mouseout-button').on('click', function() {54
element.off('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 class="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 root = $('body');25
var element = $('.my-element');26
27
var mouseoverCounter = 0;28
var mouseoutCounter = 0;29
30
function updateElement() {31
var test = ' mouseover (' + mouseoverCounter + ');' +32
' mouseout (' + mouseoutCounter + ');';33
34
element.text(test);35
}36
37
// '.my-element' can be replaced with any selector38
// it looks for '.my-element' elements inside root (<body>) element39
40
root.on('mouseover', '.my-element', function() {41
mouseoverCounter += 1;42
43
updateElement();44
});45
46
root.on('mouseout', '.my-element', function() {47
mouseoutCounter += 1;48
49
updateElement();50
});51
52
53
$('#my-mouseover-button').on('click', function() {54
root.off('mouseover', '.my-element');55
});56
57
$('#my-mouseout-button').on('click', function() {58
root.off('mouseout', '.my-element');59
});60
});61
62
</script>63
</body>64
</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.on('click', onClick1);49
element.on('click', onClick2);50
51
52
$('#my-click-1-button').on('click', function() {53
// onClick1 reference has been used to add event54
element.off('click', onClick1);55
});56
57
$('#my-click-2-button').on('click', function() {58
// onClick2 reference has been used to add event59
element.off('click', onClick2);60
});61
});62
63
</script>64
</body>65
</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 class="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 root = $('body');25
var element = $('.my-element');26
27
var click1Counter = 0;28
var click2Counter = 0;29
30
function updateElement() {31
var test = 'click 1 (' + click1Counter + ');' + 32
' click 2 (' + click2Counter + ');';33
34
element.text(test);35
}36
37
function onClick1() {38
click1Counter += 1;39
40
updateElement();41
}42
43
function onClick2() {44
click2Counter += 1;45
46
updateElement();47
}48
49
// '.my-element' can be replaced with any selector50
// it looks for '.my-element' elements inside root (<body>) element51
root.on('click', '.my-element', onClick1);52
root.on('click', '.my-element', onClick2);53
54
55
$('#my-click-1-button').on('click', function() {56
// onClick1 reference has been used to add event57
root.off('click', '.my-element', onClick1);58
});59
60
$('#my-click-2-button').on('click', function() {61
// onClick2 reference has been used to add event62
root.off('click', '.my-element', onClick2);63
});64
});65
66
</script>67
</body>68
</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">Move mouse over or out...</div>16
<br />17
<button id="my-button">Remove all mouseover and mouseout event handlers</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.on('mouseover', function() {35
mouseoverCounter += 1;36
37
updateElement();38
});39
40
element.on('mouseout', function() {41
mouseoutCounter += 1;42
43
updateElement();44
});45
46
47
$('#my-button').on('click', function() {48
// spaces separate removed events49
// as second parameter, function handle as additional criterion can be used50
element.off('mouseover mouseout');51
});52
});53
54
</script>55
</body>56
</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 class="my-element">Move mouse over or out...</div>16
<br />17
<button id="my-button">Remove all mouseover and mouseout event handlers</button>18
<script>19
20
$(document).ready(function() {21
22
var root = $('body');23
var element = $('.my-element');24
25
var mouseoverCounter = 0;26
var mouseoutCounter = 0;27
28
function updateElement() {29
var test = ' mouseover (' + mouseoverCounter + ');' +30
' mouseout (' + mouseoutCounter + ');';31
32
element.text(test);33
}34
35
36
// '.my-element' can be replaced with any selector37
// it looks for '.my-element' elements inside root (<body>) element38
39
root.on('mouseover', '.my-element', function() {40
mouseoverCounter += 1;41
42
updateElement();43
});44
45
root.on('mouseout', '.my-element', function() {46
mouseoutCounter += 1;47
48
updateElement();49
});50
51
52
$('#my-button').on('click', function() {53
// spaces separate removed events54
// as third parameter, function handle as additional criterion can be used55
root.off('mouseover mouseout', '.my-element');56
});57
});58
59
</script>60
</body>61
</html>