Это видео недоступно.
Сожалеем об этом.
jQuery add event handler to dynamically created element
HTML-код
- Опубликовано: 29 апр 2015
- 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, how to add event handlers to dynamically created elements. Let us understand this with an example.
The following example, allows us to dynamically create new list item (li), attach a click event handler and add it to the unordered list (ul). This happens when you click "Add a New List Item" button. The problem with this approach is that we are binding a click event handler to every list item. This means if you have 500 list items, then there will be 500 event handlers in the memory and this may negatively affect the performance of your application.
<html>
<head>
<title></title>
<script src="jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('li').on('click', function () {
$(this).fadeOut(500);
});
$('#btnAdd').on('click', function () {
var newListItem = $('<li>New List Item</li>').on('click', function () {
$(this).fadeOut(500);
});
$('ul').append(newListItem);
});
});
</script>
</head>
<body style="font-family:Arial">
<input id="btnAdd" type="button" value="Add a New List Item" />
<ul>
<li>List Item</li>
<li>List Item</li>
</ul>
</body>
</html>
A better way of doing the same from a performance standpoint is shown below. In this example, the click event handler is attached to the listitem (li) parent element (ul). Even if you have 500 list items, there is only one click event handler in memory.
So how does this 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 an 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 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.
<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>');
});
});
</script>
</head>
<body style="font-family:Arial">
<input id="btnAdd" type="button" value="Add a New List Item" />
<ul>
<li>List Item</li>
<li>List Item</li>
</ul>
</body>
</html>
Very perfect and precise. I am very much impressed by your vocabulary, right selection of words and you have amazing control on throw of your voice. Wonder how can a human being be so perfect. Thank you Hats off.💯
you're the great teacher on youtube
Great video, helps a lot even after 7 years!
The essence of clarity. Most excellent teaching. Thank you.
wonderful, you're a great teacher
+Mal Mahsyar Thank you so much for the feedback. Means a lot. Glad the videos are useful.
Dot Net & SQL Server training videos for aspiring web developers
ruclips.net/user/kudvenkatplaylists?view=1&sort=dd
Download our training videos and slides for offline viewing
www.pragimtech.com/Order.aspx
Code Samples, Text Version of the videos & PPTS on my blog
csharp-video-tutorials.blogspot.com
Tips to best utilise our channel
ruclips.net/video/y780MwhY70s/видео.html
To receive email alerts, when new videos are uploaded, please subscribe to our channel using the link below
ruclips.net/user/kudvenkat
Please click the THUMBS UP button below the video, if you think you liked them
Thank you for sharing the link with your friends who you think would also benefit from them
Best
Venkat
One of the best, sweet and pure VOICE, I come across. Feel like listening more and more. Great job man. All the best.
I've been looking for this kind of example, but couldn't find the proper way to search for it. Thank you so much!
Thanks u a lot sir ..💯
I am looking this only from 10 days..
three year old tutorial but still one of best tutorial on RUclips.(:
thank u sooooo much, was doing my head in, worked out it only happened on newly created li's, searched and searched and found ur video
This was a perfect explanation for this. Awesome!
Thank you, you're a life saver
Its helping me in 2021 🙏😊
very nice explanation ! thank you
Thankful! helped me out so I can go forward with my cding:)
yu saved my day♥️...
Thank you so much.This was very helpful
helped me a lot, thank you
What would you have to do if the ul is also dynamically added?
That was an excellent explanation. Thanks you !
best teacher ...for me its khanacadmy ...
Excellent job on this, sir; *thank you!*
Thank you Kudvenkat- De code monga
very good it helps me a lot
What should I do if I want to permanently modify an element.
explained really well. thanks
Thanks a lot👍👍👍
Thank you, This VDO very helpful for me.
Awesome, I was struggling with this. Very helpful :)
hi dude, I;m trying to fire a gridview button click event using jquery but im unable to do that, when using ID of that button it does nothing, but when i'll put ID of a pure button it works fine...
Thank you! The tutorial is great!!!
Hello sir thank you very much for you efforts..
Sir i attended an interview i answered all questions except 2. It would be great help if you can provide the logic
1. How to enforce user to enter input in specified format in textbox. Like firts four be alphabets next four wil be digits and last any special symbol. Using code witjout regular expressions?
2. Display the alphbet that occurred maximum time in a string. If more than one alphabet ocurrerd same time then output will be not defined. Eg AMERICA. OUTPUT : A - 2
Yogesh Kumar Thank you very much for taking time to give feedback. This means a lot. I am very glad you found the videos useful.
Sure, I will record and upload as soon as I can. Thank you very much for your patience.
I have organised all the ASP .NET, C#, and SQL Server video tutorials in to playlists, which could be useful to you.
ruclips.net/user/kudvenkatplaylists?view=1&sort=dd
Slides and Text Version of the videos can be found on my blog
csharp-video-tutorials.blogspot.com
Tips to effectively use my youtube channel.
ruclips.net/video/y780MwhY70s/видео.html
If you want to receive email alerts, when new videos are uploaded, please feel free to subscribe to my youtube channel.
ruclips.net/user/kudvenkat
If you like these videos, please click on the THUMBS UP button below the video.
May I ask you for a favor. I want these tutorials to be helpful for as many people as possible. Please free to share the link with your friends and family who you think would also benefit from them.
Absolutely fantastic!
sir please cover the parts which left uncovered,like :
c# :how the garbage collector works,observer design pattern,etc...
You're a god! Thanks for the video
Thank you very much
Thanks mate. Well done.
Awesome video dude!! great job! thanx
Hi thanks for this solution...But i want to done it onload....suppose i want to add a li onload.
Amazing. Thank you.
You too have a great day ..
very useful
!!!!!!!!!
thank you venkat. You solved one of my problem. But I have one small doubt. Is the handler object (Parent UL in your case) should be hard coded element? I am facing a situation in which all elements in that section is dynamically generating. Consider in my case I have to create an load a table element with few data and a button event within its cells through ajax. in this case I think I cannot use the table or any of its child nodes as event handlers because all are generating on the fly. Please let me know Can I use TR in my case as an event handler? or should I use any parent node like a container DIV of the entire table
Hello Venkat,
Thank you for all the Videos and the great job you have done so far. I followed most of the videos in your .Net series.
I have a problem in this session. when I use 'fadeOut' I receive an unhandle exception and the message is: Object doesn't support property or method 'fadeOut'!!!!!!!!!!
How can I solve this?
Thanks
How to check dynamically added text fields values are same or not
VERY NICE! thank you
sir..i hv images that are fetching from instagram api and now i want to show them...i just want to show and hide images ..but donot know how to do..as donot have class of the anchor tags..as there is no html on page
Big like buddy
Nice
Thank you!
thank you sir
wonderfull, but what about on hover event ?
ah i got it $(document).on("mouseenter","#element",function()
Sir can i add class name instead of selector?
How to add jquery datepicker to dynamically cloned element.
Thank you
How do i do this without jquery?
sir how i can change image on click
3:41 vs 5:20
Thank you!