Unbind() method:
Unbind() method is used to remove events attached to html element while bind() method is used to attach events to selected html elements .
It is mainly used to prevent the events to be executed when needed and when no longer needed unbind method will remove the event attached to html element.
Syntax:
$(selector).unbind(event,function,eventObj)
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
button{background:black;color:#fff;border-radius:4px;border:1px solid black;padding:5px}
.container >p{text-align:center;max-width:}
.container{max-width:250px;padding:10px 0px;}
</style>
<script>
$(document).ready(function(){
$(".container >p").click(function(){
$(this).slideToggle();
});
$("button").click(function(){
$(".container >p").unbind();
});
});
</script>
</head>
<body>
<div class="container">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.</p>
<p>As opposed to using 'Content here, content here', making it look like readable English.</p>
</div>
<button style="">Click to remove events attached</button>
</body>
</html>
In the above example we have attached slideToggle() event to <p> tag and when user will click on button event attached to <p> tag will no longer work.
You can check the above example output here:https://jsfiddle.net/bw99ptzn/1/
0 Comment(s)