2

I have some javascript / jquery to clone a table with some input files and a button. After cloning the button doesn't seem to work anymore when it has the same class.

The situation: When you click the add product, a row will be copied under the last row, so that a user can add an other product to the option. Here's an example: enter image description here enter image description here

There's an other button beneath those products: Create option. This button clones the first table (Option) and past it under the button. But after it has been copied, the button 'Add Product' doesnt seem to work anymore enter image description here

I don't have any errors, so I don't know what I am doing wrong.

This is the code that I'm using to clone the tables:

<script type="text/javascript">
$(document).ready(function () {
    $('.addproduct').click(function (e) {
        // Clone a product and add it to the option.
        e.preventDefault();
        var item = document.getElementById('hiddenTemplate').cloneNode(true);
        $('#hiddenTemplate').before(item);
        $(item).removeAttr('id');

    });
    $('.addOption').click(function (e){
        // Create a new option
        e.preventDefault();
        var item = document.getElementById('hiddenOption').cloneNode(true);
        $('.newOption').append(item);
        $(item).removeAttr('id');
        $(item).addClass('tableOptions');
    });
});

Could some1 explain to me what I'm doing and what might be an solution? My code isn't prefect atm i think and I'm open for learning!

Happy Coding!

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Koen van de Sande
  • 223
  • 1
  • 5
  • 14
  • 1
    `cloneNode()` does not copy event handlers. I'd suggest using jQuery's `clone(true)` instead, which does, or using delegated event handlers. The latter would be the easiest. – Rory McCrossan Mar 17 '17 at 08:46
  • Whenever you generate dynamic html, the events are not bounded to them because all events are bounded before a webpage is generated. So delegation of events is required i.e. adding events to the parent element. Check @Ameya Deshpande answer. – san A Mar 17 '17 at 08:50
  • Does the 'Create option' button re-use the `.addproduct` click code? If not, it would help if you posted it as well as the associated HTML – Pineda Mar 17 '17 at 09:06

1 Answers1

1

use document.on when you add elements dynamically to DOM

 $(document).on('.addproduct','click', function (e) {
        // Clone a product and add it to the option.
        e.preventDefault();
        var item = document.getElementById('hiddenTemplate').cloneNode(true);
        $('#hiddenTemplate').before(item);
        $(item).removeAttr('id');

    });

    $(document).on('.addOption','click',function (e){
        // Create a new option
        e.preventDefault();
        var item = document.getElementById('hiddenOption').cloneNode(true);
        $('.newOption').append(item);
        $(item).removeAttr('id');
        $(item).addClass('tableOptions');
    });
Ameya Deshpande
  • 3,580
  • 4
  • 30
  • 46