The jquery bind() method is used to bind one or more events to the selected element. This method supports one or more browsers. And it's fast accessible. When bind() is activated, calls a function to which all statements are written. Event, data, function, map are passed to this function. Event and Action are mandatory but Map and Data are optional.
The jquery unbind() method is used to remove all added events. Whatever is the selected element.
Syntax:$(selector).bind(events, function)
$(selector).bind(events, data, function)
$(selector).bind(events, data, function, map)$(selector).unbind(event)
$(selector).unbind(event, function)
$(selector).unbind(event, function, eventObj)
Example :
<!doctype html>
<html lang='en'>
<head>
<!-- Required meta tags -->
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<!-- Bootstrap CSS -->
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' integrity='sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T' crossorigin='anonymous'>
<title>Event demo</title>
<script>
$(document).ready(function () {
$('#clk').bind('click', function (event) {
var str = '( ' + event.pageX + ', ' + event.pageY + ' )';
$('p').text('This is a single click! ' + str);
});
$('#clk').bind('dblclick', function () {
$('p').text('This is a double click on ' + this.nodeName);
});
$('#clk').bind('mouseenter mouseleave', function (event) {
$('p').toggleClass('alert alert-success');
});
$('button').bind('click', function (event) {
$('p').text('Unbind Click event ').addClass('alert alert-danger');
$('#clk').unbind('click');
});
});
</script>
</head>
<body>
<div class='container'>
<div class='p-3 my-3 bg-primary text-center text-white rounded-lg' id='clk'>Click me ( one or two times) hover me</div>
<p class=''>Single Click</p>
<button class='btn btn-danger' >Remove Click event</button>
</div>
<script src='https://code.jquery.com/jquery-3.3.1.slim.min.js' integrity='sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo' crossorigin='anonymous'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js' integrity='sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1' crossorigin='anonymous'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js' integrity='sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM' crossorigin='anonymous'></script>
</body>
</html>
Output:
