Clone Loosing Click Event

[neilfurry]

hi mate its me again asking questions on jquery clone.

 

As solved before, i have a form that contains rows that is being cloned. (works perfect).

Make a Copy of that form to the right side (Works great)

 

here is my problem, when i make a copy of that form to the right the click event is lost on the New Row button to the form on the right. can you help me with this?

Here is a working jsfiddle:

 

https://jsfiddle.net/mphur5eq/5/

Edited July 6, 2016 by neilfurry

[neilfurry]

updated version

 

https://jsfiddle.net/mphur5eq/5/

Edited July 6, 2016 by neilfurry

[requinix]

Cloning elements will not also clone event handlers.

 

1. Change your New button (preferably Copy too) to use a class instead of an ID. Remember: IDs must be unique so if you create a clone then you'll be duplicating the ID too and that's not good.

2. When DOM events happen in Javascript they happen to the original element as well as all parent elements. With .on you can apply an event handler to a parent that only fires for specific children that match a selector, whether they exist now or in the future. Use that to tie your New action to all buttons in the entire document that match that CSS class you picked.

Edited July 6, 2016 by requinix

[neilfurry]

Hi Thank you for the response.

 

COPY button will be used only once. so the only change i made is in the New Row button which will be used multiple times so i make use class instead of id on it.

 

https://jsfiddle.net/mphur5eq/9/

 

however when i tested, when i clicked on the New Row button on the form on the right the left rows increases instead of the right row where the button is clicked

 

can you provide an edit to the jsfiddle.

 

thank you

[neilfurry]

Solved

 

https://jsfiddle.net/mphur5eq/12/