Question

On change of select(dropdown) in table after add new row

Forms Version 10 Web Customizations

Updated April 6, 2018

asked on April 6, 2018 • Show version history

I found some odd behavior that I wanted to get some feedback on. Being a javaScript novice, it is probably just me.

I have a table where I have javaScript do something if a checkbox is checked. This is working great.

//on change of the table run function
 $('#q119').on('click', 'input[type="checkbox"]', bothFunctions);

In the same table, there is a column with a dropdown. On a change to the dropdown a function runs:

  $('#q119 select').on('change', bothFunctions);

This works great unless the add row link is clicked. Any new row ignores the above 'on change of select' code.

I tested this by changing the code to the following:

  $('tr').on('mouseover', function(){
    console.log('if over a row');
  });

  $('td').on('mouseover', function(){
    console.log('if over a column');
  });

The console log would have a result UNLESS the mouse hovered over the new 'added new row'.

I backed the code up to test with tbody and it was successful:

  $('tbody').on('mouseover', function(){
    console.log('if over a table');
  });

There is a cutoff between tbody and trow.

My final code, which is working well:

  $('#q119 tbody').on('change', function(){
    bothFunctions();
  });

Can anyone tell me why this is happening? The row is clearly in the code of the table:

Thanks for the input. This has been puzzling me quite a bit. Thanks!

0 0

Answer

SELECTED ANSWER

replied on April 6, 2018 • Show version history

In your case, the code would be something like:

$('tbody').on('mouseover', 'tr', function(){
    console.log('asd');
});

Placing the function outside of the document ready function would work if the javascript code is rendered after the DOM has loaded. I am not sure exactly when the Form renders the JS code but this should be easy to test. If you place the code above prior to the document ready function and the code is not working, you might have to wait for an event like load or DOMContentLoaded to trigger the function.

1 0

Replies

replied on April 6, 2018 • Show version history

Hi,

That is likely because the tr element (pointed by the red arrow in your image) does not exist when the page initially loads unlike the tbody element. You can bind events on dynamically created elements by doing something like below.

$(staticAncestors).on(eventName, dynamicChild, function() {});

2 0

replied on April 6, 2018

Thanks Kentaro,

Would I use the literal 'dynamicChild' selector? or are you suggesting I put an element in there.

Also, could I place the selector outside of the document ready function and it would work?

Thanks, this really clarifies what the cause of the issue is.

0 0

SELECTED ANSWER

replied on April 6, 2018 • Show version history

In your case, the code would be something like:

$('tbody').on('mouseover', 'tr', function(){
    console.log('asd');
});

1 0

You are not allowed to follow up in this post.

Question

Question

On change of select(dropdown) in table after add new row

Answer

Replies

Sign in to reply to this post.