Click event on cloned element of same class

问题

I am cloning a row when a button is pressed in a row. The row contains the button being pressed, therefore when cloned a new row is added below, meaning there is another button. The button states "Add" but changes to "Remove" when add is pressed. The problem I'm having is that I want the click() function to check the last instance of the button/class, instead but it remains checking the original button. I want it to check the last button.

Take a look at the jsfiddle to see what I am trying to do:

http://jsfiddle.net/Fogest/4gdJk/

My issue is not changing the name of the buttons to "Remove", but I want to know how should I be applying this click function to the last button that is added?

Edit: Using jQuery v1.6.1

回答1:

Use .on instead .click here is documentation

$(document).on("click", ".add-remove-new:last", function () {
    $('tr.newService:first').clone().insertAfter($('tr.newService:last'));
});

working demo

or you can use .live for jquery 1.6.1

$('.add-remove-new:last').live('click', function() {
    $('tr.newService:first').clone().insertAfter($('tr.newService:last'));
});

demo for 1.6.1

回答2:

Here is the DEMO. I think this what you want!

$('body').on('click', '.add-remove-new:last', function() {
        $('tr.newService:first').clone().insertAfter($('tr.newService:last'));
    });

回答3:

This thread seems to be dealing with the same problem and solves it using the on() or delegate() functions.

来源：https://stackoverflow.com/questions/18111105/click-event-on-cloned-element-of-same-class