jQuery '.live' & '.die' Mouse events


 

jQuery '.live' & '.die' Mouse events

In this tutorial ,we will discuss about how to remove an event using 'die' mouse event of jQuery.

In this tutorial ,we will discuss about how to remove an event using 'die' mouse event of jQuery.

jQuery '.live'  & '.die' Mouse events

In this tutorial ,we will discuss about how to  remove an event using 'die' mouse event of jQuery. In this Example, we removes the 'click' event of a button by clicking on other button. First button is for enabling event , Second is for removing event and third button is the one whose event are adding & removing.

removeEvent.html

<!DOCTYPE html>
<html>
<head>
<style>
button { margin:5px; }
button#theone { color:red; background:blue; }
</style>
<script src="jquery-1.4.2.js"></script>
</head>
<body>
<button id="theone">click not working</button>
<button id="bind">Enable Click</button>
<button id="unbind">Disable Click</button>
<br><b><font color="purple">
After enable/disable click , click on blue button to see effect of die event
</font></b>
<div style="display:none; color:red;">Button Clicked!</div>
<script>

function aClick() {
$("div").show().fadeOut("slow");
}
$("#bind").click(function () {
$("#theone").live("click", aClick).text("click working");
});
$("#unbind").click(function () {
$("#theone").die("click", aClick).text("click not working");
});
</script>
</body>
</html>

OUTPUT

Before Clicking :

After Clicking "Enable click" , clicking on blue button gives output :

Download Source Code

Click here to see demo

Ads