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="https://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

46

Best answers

46

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="https://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

jQuery .resizable(): How to return to original size after clicking the button?
Publish date: 2022-02-23 | Comments: 1

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

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

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