jQuery event delegation
HTML-код
- Опубликовано: 10 сен 2024
- Link for all dot net and sql server video tutorial playlists
www.youtube.co...
Link for slides, code samples and text version of the video
csharp-video-tu...
Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our RUclips channel. Hope you can help.
/ @aarvikitchen5572
In this video we will discuss the concept of event delegation in jQuery.
Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future. Both on() and delegate() functions allow us to perform event delegation.
How does the following example work :
1. When you click on a list item (li), the event gets bubbled up to its parent (ul) as the list item (li) does not have it's own click event handler
2. The bubbled event is handled by the the parent (ul) element, as it has a click event handler.
3. When a new list item is added dynamicaly, you don't have to add the click event handler explicitly to it. Since the newly created list item (li) is added to the same parent element (ul), the click event of this list item also gets bubbled upto the same parent and will be handled by it.
4. undelegate() stops event delegation
<html>
<head>
<title></title>
<script src="jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('ul').delegate('li', 'click', function () {
$(this).fadeOut(500);
});
$('#btnAdd').on('click', function () {
$('ul').append('<li>New List Item</li>');
});
$('#btnUndelegate').on('click', function () {
$('ul').undelegate('li', '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>
If you are using jQuery 1.7 or higher version, jQuery recommends to use on() to perform event delegation instead of delegate(). The above example can be very easily rewritten using on() and off() functions, instead of delegate() and undelegate() functions as shown below. We discussed performing event delegation using on() function in detail in Part 36 of jQuery tutorial.
<html>
<head>
<title></title>
<script src="jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('ul').on('click', 'li', function () {
$(this).fadeOut(500);
});
$('#btnAdd').on('click', function () {
$('ul').append('<li>New List Item</li>');
});
$('#btnUndelegate').on('click', function () {
$('ul').off('click', 'li');
});
});
</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>
EVERYTHING SEEMS EASY WHEN EXPLAINED BY YOU SIR. YOU ARE THE BEST OF THE BEST.
Happy Labour Day to you sir. I would like to take this opportunity to thank you for the relentless contributions and efforts in recording and uploading all the videos for the benefits of the .NET communities. Your efforts are truly appreciated. Once again all your videos are superb!!!
Tan YEW MENG Hello Edward. Thank you and wish you the same.
I like that you have everything written out in the description.
Perfect. I wasn't quite sure about the explanation I was given in my course material. I'm glad you were the first video that came up. Great explanation.
The only reliable tutorial
Best tutorial ever seen. Great!
Hi best tutorial.
Thank you for your video, I had my selectors the wrong way around on my delegated "on" function until I watched your video
valuable resources notes, examplesm, infos etc. thank you.
Is it possible to re-delegate an event listener? If there was such a term.
Thanks so much Eng Venkat
Great Videos @kudvenkat.
A quick query, kindly answer please
Lets assume we have two webpages viz default.aspx and inventory.aspx and one myScript.js where all jQuery script goes for both webpages.
Now i have button with id as btn1 on both pages. So how do i tell jQuery which button is clicked as I can define button click even only once in myScript.js for btn1.
Lets assume we can not distinguish the buttons based on selectors. Both buttons have same id, css class etc.
One way that is found is to get path for the web page using window.location.pathname, is there is any other way.
I want all my jQuery at one place ie. in myScript.js only.
Please help.
Thank you
Hi venkat can please explain what pub/sub and dependency injection in javascript
thank you sir
Hi Venkat.. I added a delegate button which activates the event delegation upon clicking the button. But I run into an error which says " Object doesn't support property or method 'apply'" on line "ret = ( (jQuery.event.special[ handleObj.origType ] || {}).handle || handleObj.handler ).apply( matched.elem, args );" in jQuery.event.dispatch. (jQuery version: jquery-2.1.4.js)
Here's the code snippet:
$(document).ready(function () {
$('ul').on("click", 'li', function () {
$(this).fadeOut(200);
});
$('#delegateButton').click(function () {
$('ul').on('click', 'li');
});
$('#undelegateButton').click(function () {
$('ul').off('click', 'li');
});
});
List Item 1
List Item 2
List Item 3
List Item 4
I would be glad if you could help me figure out why I am seeing this error.
Not sure if you figured this out, but in your delegateButton you didn't specify a function.
You wrote:
$('#delegateButton').click(function () {
$('ul').on('click', 'li');
});
But you need to include a function as the third parameter, or the click event won't work.
hello sir,how are u.plz cover the parts which left uncovered,..
angel man(novel man)plz try this.
u are a amazing person for me.