Question

i have an button “add” i click it then a save button will append to my div. this is working, but i cant trigger the function of the “save” button. if i paste the “save”- button in the code directly it is working. i cant find my error…

<a class="save" href="#"><img src="images/save.png" alt="save_working" /></a>
<a class="add_row" href="#"><img src="images/icon_add_light.png" alt="add" /></a><br>
<div id="hinzu"></div>


$(".save").click(function() {
    alert("saveworking");
});


$(".add_row").click(function() {
    $("#hinzu").append('  <a class="save" href="#"><img src="images/save.png" alt="savenotworking" /></a>');
});

Here is an fiddle with it: http://jsfiddle.net/MgcDU/321/

Why isnt this working with the js append method?

Answer 1

It’s dynamic, so it does not exist when you’re binding the event. For that you would need to delegate the event to an element that actually exists at the time of attaching the event handler :

$("#hinzu").on('click', '.save', function() {
    alert("saveworking");
});