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.
Contents
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]
