Click event on cloned element of same class

Question

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

David · Accepted Answer · 2013-08-07T19:02:59.650

2

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

edited Aug 07 '13 at 19:02

answered Aug 07 '13 at 18:38

David

1,829
20
31

version added: 1.7 but you can use migrate https://github.com/jquery/jquery-migrate/ – David Aug 07 '13 at 18:48
Any alternative ways of doing this without utilizing other software? – ComputerLocus Aug 07 '13 at 18:53
Thanks, that works. You can edit your answer if you'd like to reflect the correct method I used. I have added to my question that I am using 1.6.1. – ComputerLocus Aug 07 '13 at 19:00

score 0 · Answer 2 · answered Aug 07 '13 at 18:36

0

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

answered Aug 07 '13 at 18:36

Deepak Biswal

4,280
2
20
37

score 0 · Answer 3 · edited May 23 '17 at 11:56

0

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

edited May 23 '17 at 11:56

Community

1
1

answered Aug 07 '13 at 18:38

J Delaney

589
4
17

Click event on cloned element of same class

3 Answers3

Linked