How To Add Event Listener To Dynamically Created Element

Once the web page is being fully loaded, then 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 bind with it not trigger on the new element. But it is working on the elements which are created during the webpage loading.

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

Attach Event to Dynamically Created Elements with jQuery

On element creation
Add event to the parent element
Using document
Demo
Conclusion

1. On element creation

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

Example

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

In the script, attach click event on #lists li selector to change the background color of clicked <li>.

Append a new <li> to the <ul> element on the add button click and also attaching click event on <li> using .on() method.

<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>

2. Add event to the parent element

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

Syntax –

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

Example

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

I use the <ul> for the parent selector and <li> for child selector in .on().

NOTE – You can use any other parent selector in which child element is belong. But make sure to define target element child selector in .on.

<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(){     $('#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>

3. Using document

You can also use the document to attach the event to the selector.

Syntax –

$(document).[event-name].(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>').on('click','li',function(){       $('#lists li').css('background','#ffffff');       $(this).css('background','#d9f531');     });   }); });  // Click on list item $(document).click('#lists li',function(){   $('#lists li').css('background','#ffffff');   $(this).css('background','#d9f531'); }); </script>

4. Demo

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

5. Conclusion

You can use any of the above-specified ways on your webpage to attach the event on the dynamically created element.

[shareshort_post]