filmov
tv
jQuery add event handler to dynamically created element
Показать описание
Link for all dot net and sql server video tutorial playlists
Link for slides, code samples and text version of the video
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 YouTube channel. Hope you can help.
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 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 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>
Link for slides, code samples and text version of the video
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 YouTube channel. Hope you can help.
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 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 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>
0:09:15
jQuery add event handler to dynamically created element
0:04:52
4: How to use events in jQuery - Learn jQuery front-end programming
0:02:56
jQuery - Onclick event listner for dynamically added elements
0:01:32
11 jQuery Multiple Event Handlers
0:06:06
How to add event handlers to an html element in JQuery
0:10:33
Binding event handlers in jquery
0:10:45
jQuery 39 - Events 9 - Events handlers for dynamically created element
0:02:29
Using jQuery: using an event handler
0:04:27
JQuery - Event Handling
0:15:51
23 jQuery Event Handling: Comprehensive Guide with Examples | JavaScript Tutorial
0:44:23
jQuery Live - 5 | Forms and Events in jQuery | jQuery Tutorial | jQuery Training | Edureka
0:01:22
jQuery : Add eventhandler to jQuery UI datepicker after its creation
0:06:16
Passing data to event handler in jQuery
0:10:29
jQuery 36 - Events 6 - Binding Event Handlers using bind method
0:08:42
Binding event handlers using jquery on method
0:01:35
jQuery : Add event handler to an element that not yet exists using on()?
0:10:02
jQuery Rehab - Event Handling - Episode 7
0:09:02
Add Event Handlers JQuery with error
0:10:43
Easy jQuery - How to use Event Methods (3)
0:07:48
127 Adding Event Listeners with jQuery
0:03:50
JQuery - Event Handling
0:04:58
Event Handlers vs Event Listeners in JavaScript 👨💻💯
0:06:04
jQuery events - Beau teaches JavaScript
0:01:41
Bind A Function To Multiple Events In Jquery
Комментарии