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

Home Tutorial Jquery jQuery '.live' & '.die' Mouse events

jQuery '.live' & '.die' Mouse events
Posted on: August 3, 2010 at 12:00 AM

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

Related Tags for jQuery '.live' & '.die' Mouse events:

«Previous Index Next»

Ask Questions?

If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.

Ask your questions, our development team will try to give answers to your questions.

Tutorial Topics