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?

Answer 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