external control not working on new clones

[solarsilk]

hi @actual-saurabh loving your plugin, thanks! but i'm running into an issue: when i use an external control for the delete button, it works on the original elements coded into the page, but not on newly cloned ones.

please check out this fiddle: https://jsfiddle.net/split19/boegwbq9/4/ you can delete the 2nd row, but when cloning a row, you can't delete it.

any ideas? thank you!

[actual-saurabh]

See, https://jsfiddle.net/boegwbq9/5/

The event binding won't happen and the click event itself won't work. When you bind the event to the .delete-row-btn class, when the code is run (on document ready) the event will bind only to the delete buttons present in the DOM at that moment:

$( '.clone-row-btn' ).on( 'click', function(){

    //stuff here never happens on newly cloned elements
}

So, the new clones' delete button which is added to the DOM later will not have the click event binding. If you bind the event to the wrapper instead, you account for any new element whether added by cloneya or using ajax, like this:

$( '.rows' ).on( 'click', '.delete-row-btn', function(){

    //stuff here will always happen on any element even if it is added later
}

See: https://jsfiddle.net/boegwbq9/6/

[solarsilk]

Thank you!

[solarsilk]

my original fiddle was a simplified version of what i really need to do. i got it working as you described, but really i need a nested clone of "pages" and "rows". i know i'm doing something wrong, but i'm not sure how to use jQuery's on() in order to get the nested clones to work. my problem is with the add row button and delete buttons in the newly cloned page. please see: https://jsfiddle.net/yawm8e0v/3/ thank you very much @actual-saurabh !