用jQuery插入后的按钮操作不起作用

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");
});

Answer 2

Use it like:

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

Answer 3

this is because when you try to do the $(".save") it does not exist.

You have to use the on() for monitoring if any new .save are in your doom and assign the event handler.

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

Answer 4

It is not working because the $(".save").click() call binds the onclick handler to all elements with class save which already existed at the point of the call.

To bind the event handler also to elements which did not exist at the time of the binding, you must use $(document).on('click', '.save', function() { [...] })

Answer 5

If you want to save you code, use this:

<script type="text/javascript">
    $(function() {
        $('.save').click(function() {
            alert('saveworking');
        });
    });

    $(function() {
        $('.add_row').click(function() {
            alert('add_row');
        });
    });
</script>

One more way to do this:

<script type="text/javascript">
    $(document).ready(function () {
        $('.save').click(function () {
            alert('saveworking');
        });

        $('.add_row').click(function () {
            alert('add_row');
        });
    });
</script>