user image

Jo Micheal
Published in : 2021-06-19

[SOLVED] jQuery .click() not working with auto added buttons

jQuery

I am facing a problem with my page when I add a button automatically using foreach loop with append() function or any way of appending the elements into the page, it doesn't work! using .click() function I am not sure how to figure out this issue

Note: the button do not respond to any command like console.log()

Here is the code of the page 

<!DOCTYPE html><html lang="en"><head> <meta charset=UTF-8> <meta name=viewport content="width=device-width, initial-scale=1.0"> <title>Homepage</title></head><style> button { display: block; margin: 10px; }</style><body> <div id="hero"> Main section <button id="add_btn">Add one more button</button> </div> <script src=//code.jquery.com/jquery-3.6.0.min.js></script> <script> jQuery(document).ready(($) => { $("#add_btn").click(() => { $("div#hero").append(`<button id="add_more_buttons">add button clicked</button>`); }); $("#add_more_buttons").click(() => { console.log('This is automatic populated button'); $("div#hero").append(`<button id="add_more_buttons">add button clicked</button>`); }); }); </script></body></html>

Please help if there is any jQuery expert, 
Thanks

web-brackets.com

Comments

Mohamed Atef Date : 2021-06-19

Best answers

51

Best answers

51

Hi Jo, 
This issue happened because jQuery doesn't read the new button so you need to use on(); function like 

 $("body").on('click', '#add_more_buttons', () => { console.log('This is automatic populated button'); $("div#hero").append(`<button id="add_more_buttons">add button clicked</button>`); }); 

So the entire page should look like 

<!DOCTYPE html><html lang="en"><head> <meta charset=UTF-8> <meta name=viewport content="width=device-width, initial-scale=1.0"> <title>Homepage</title></head><style> button { display: block; margin: 10px; }</style><body> <div id="hero"> Main section <button id="add_btn">Add one more button</button> </div> <script src=//code.jquery.com/jquery-3.6.0.min.js></script> <script> jQuery(document).ready(($) => { $("#add_btn").click(() => { $("div#hero").append(`<button id="add_more_buttons">add button clicked</button>`); }); $("body").on('click', '#add_more_buttons', () => { console.log('This is automatic populated button'); $("div#hero").append(`<button id="add_more_buttons">add button clicked</button>`); }); }); </script></body></html>

Jo Micheal Date : 2021-06-19

YEAH! it works, Thank you this is really useful :)

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

Accessing Radio button values using Jquery
Publish date: 2022-03-05 | Comments: 1

Tag: jQuery

How to use !important using jQuery css function?
Publish date: 2022-01-27 | Comments: 2

Tag: jQuery

[solved] SyntaxError: Unexpected token o in JSON at position 1 jQuery
Publish date: 2022-01-30 | Comments: 2

Tag: jQuery

How to get the style of element in jQuery? add it to another
Publish date: 2022-01-27 | Comments: 2

Tag: jQuery

Display JSON in HTML using jQuery
Publish date: 2022-01-30 | Comments: 2

Tag: jQuery

jQuery Selector is not working .click
Publish date: 2022-02-21 | Comments: 1

Tag: jQuery

jQuery alter the class of a button when I click on it?
Publish date: 2022-02-12 | Comments: 1

Tag: jQuery