jQuery click function not working on appended button

Question

I have this .append function which generates a button for every element:

.append('<button type="button" id="add">Hinzufügen</button>')

Then i have this function which should do something when I click on the button above. The function works on a button which is not "appended".

$(document).ready(function () {
   $("#add").on("click", function () {
      alert("Test");
    });   
});

Does anyone know, why this doesn't work?

First of all, IDs are not intended to be used on multiple elements, use a class for this. — Luca Kiebel
– Luca Kiebel, Commented Jan 9, 2022 at 11:24
Write your jquery after appending and your buttons with dynamic ids or a class instead please — Keivan Soleimani
– Keivan Soleimani, Commented Jan 9, 2022 at 11:24

Ran Turner · Accepted Answer · 2022-01-09 11:24:44Z

1

A page can't be manipulated safely until the document is ready. jQuery detects this state of readiness and allows you to use ready(). The code included inside $( document ).ready() will only run once the Document Object Model (DOM) is ready for JavaScript code to execute.

You are probably appending the button after this code is being executed.

Another issue you should probably fix is making the id's attributes unique.

More about ready() here

answered Jan 9, 2022 at 11:24

Ran Turner

18.7k9 gold badges60 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

GRIV Over a year ago

I have my ready funtion above everything. Could that be the problem then?

Luca Kiebel Over a year ago

No, you will have to attach the listeners to newly created Elements after you have created them, not through the ready fn

Rahul Over a year ago

@GRIV document readiness removes the need of ordering your js code. It might be related to the event delegation. As jquery on method attaches to the presently existing elements. refer this - api.jquery.com/on

Collectives™ on Stack Overflow

jQuery click function not working on appended button

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related