Attach event to Dynamic elements in jQuery

Once a document is being loaded, the same event handler is not being attached to newly created elements.

It seems like the event handler is being attached conceptually.

When you perform some action on new elements, then the event bound with it not trigger on the new element. But it is working on the elements which are created in the ready state.

This problem is common if the event handlers are not correctly attached.

Attach event to dynamic elements in jQuery


Contents

  1. On element creation
  2. Add event to parent element
  3. Demo
  4. Conclusion

 

1. On element creation

You can attach the event at creation time to the element. For this, you can use .on() method.

Example

In the example, I have created an unordered list and a button for adding new list items.

<input type='button' value='Add' id='but_add'>
<ul id='lists'>
 <li>List item 1</li>
 <li>List item 2</li>
 <li>List item 3</li>
</ul>

<!-- Script -->
<script type="text/javascript">
$(document).ready(function(){

 // Click on list item
 $('#lists li').click(function(){
  $('#lists li').css('background','#ffffff');
  $(this).css('background','#d9f531');
 });

 // Add new list item 
 $('#but_add').click(function(){

  // Attaching click event on new list item
  $('#lists').append('<li>New List item</li>').on('click','li',function(){
   $('#lists li').css('background','#ffffff');
   $(this).css('background','#d9f531');
  });
 });
  
});
</script>

jQuery Explanation

Adding new list item when Add button gets clicked while appending it to the unordered list also attaching click event.


 

2. Add event to parent element

Attach event to the child elements of the parent selector using .on() method.

Syntax –

$('parent-selector').on('event-name','child-selector', function(){
 // Statement
});

Example

<input type='button' value='Add' id='but_add'>
<ul id='lists'>
 <li>List item 1</li>
 <li>List item 2</li>
 <li>List item 3</li>
</ul>

<!-- Script -->
<script type="text/javascript">
$(document).ready(function(){

 // Add new list item 
 $('#but_add').click(function(){

  // Attaching click event on new list item
  $('#lists').append('<li>New List item</li>');
 });
 
 // Click on list item
 $('#lists').on('click','li',function(){
  $('#lists li').css('background','#ffffff');
  $(this).css('background','#d9f531');
 });
});
</script>

jQuery Explanation

Here, instead of attaching the event to every new item I bind an event to parent selector and set the target toward child selector li.

Within example, I use the unordered list for parent selector you can either define the body but you need to manage your target child selector in the method.


 

3. Demo

Click the button to add new list item and select any of the available list items.


 

4. Conclusion

You can use any of the two-way in your project but it’s better to attach event using parent element. It will bind the event handler to all child elements now and the new one created later.

Related Post

Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *