0

I have list of rows and one cell with select. One row is hidden. I use it as a form to add new row. On document ready I select all select fields and add on change event for all of them:

const supplierFields = $('select[name$="supplier"]');
supplierFields.on('change', async (select) => {
        //custom logic here..
    });

When I use hidden row to add new row I select it and add data:

const emptyForm = EstimatesTable.visualization.formSet.find( '.empty-form').prev('tr');

When new row is added event on select field disappears, but other events on inputs for example stays. Where could be an issue? When I inspect elements on browser hidden row and other old rows has events. After refresh event appears because of on document ready function.

mplungjan
  • 169,008
  • 28
  • 173
  • 236
Dainius
  • 37
  • 8
  • Dynamically added DOM elements don't inherit/copy original event listeners. – Taras Danyliuk Sep 18 '20 at 10:48
  • Then why events on inputs are copied? – Dainius Sep 18 '20 at 10:53
  • Maybe you have delegated the inputs. We cannot tell since you did not show enough code and HTML – mplungjan Sep 18 '20 at 11:00
  • 1
    Not sure there's anything about "copying elements" here, but this line *"when new row is added"* indicates the rows are being added after the event has been assigned. Events only apply to elements that exist at the time the code runs - you need to use event delegation to apply events automatically to new elements. – freedomn-m Sep 18 '20 at 12:39

0 Answers0