Suggested Videos
Part 35 - Passing data to event handler in jQuery
Part 36 - jQuery add event handler to dynamically created element
Part 37 - jQuery event delegation
In this video we will discuss jQuery live() and die() functions.
We discussed how to perform event delegation, using on() method in Part 36 and using delegate() method in Part 37. Another way to perform event delegation is by using live() function.
With on() and delegate() functions the event gets bubbled up to the specified parent element, where as with live() function the event gets bubbled up all the way to the document object.
The example that we worked with in Part 36 and Part 37 is rewritten using live() and die() functions as shown below. Notice that, to perform event delegation we are using live() function and to stop event delegation we are using die() function.
live() function is deprecated in jQuery 1.7 and completely removed in jQuery 1.9. Everything that can be achieved with the following methods can be achieved by using .on() function.
live()
bind()
delegate()
So, if you are using jQuery 1.7 or higher version, jQuery recommends to use on() function.
Please note : Older versions of jQuery can be found on the Microsoft CDN
http://www.asp.net/ajax/cdn
Part 35 - Passing data to event handler in jQuery
Part 36 - jQuery add event handler to dynamically created element
Part 37 - jQuery event delegation
In this video we will discuss jQuery live() and die() functions.
We discussed how to perform event delegation, using on() method in Part 36 and using delegate() method in Part 37. Another way to perform event delegation is by using live() function.
With on() and delegate() functions the event gets bubbled up to the specified parent element, where as with live() function the event gets bubbled up all the way to the document object.
The example that we worked with in Part 36 and Part 37 is rewritten using live() and die() functions as shown below. Notice that, to perform event delegation we are using live() function and to stop event delegation we are using die() function.
<html>
<head>
<title></title>
<!--<script
src="jquery-1.11.2.js"></script>-->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$('li').live('click', function () {
$(this).fadeOut(500);
});
$('#btnAdd').on('click', function () {
$('ul').append('<li>New List Item</li>');
});
$('#btnUndelegate').on('click', function () {
$('li').die('click');
});
});
</script>
</head>
<body style="font-family:Arial">
<input id="btnAdd" type="button" value="Add a New List
Item" />
<input id="btnUndelegate" type="button" value="Undelegate" />
<ul>
<li>List Item</li>
<li>List Item</li>
</ul>
</body>
</html>
live() function is deprecated in jQuery 1.7 and completely removed in jQuery 1.9. Everything that can be achieved with the following methods can be achieved by using .on() function.
live()
bind()
delegate()
So, if you are using jQuery 1.7 or higher version, jQuery recommends to use on() function.
Please note : Older versions of jQuery can be found on the Microsoft CDN
http://www.asp.net/ajax/cdn
No comments:
Post a Comment
It would be great if you can help share these free resources