Inserted element does not respond to change event

[mhassaan]

Nested fields in my form contains select fields. I would like to get ID of select field every time value is changed but the problem is nested form elements don't respond to change event. Here is the code sample

.nested-fields
  .row
    .col
      = f.input :at_territory,as: :select,collection: Territory.all.order(name: "ASC").map{|t|[t.name, t.id]}, input_html: {class: 'required select2 user_roles_territory_select '}

$('.user_roles_territory_select').on('change',function(){
       console.log("Does not get triggered",this); 
})

What could be the possible workaround?

[nathanvda]

You should ask this on stackoverflow. The fact that you are using a nested form (using cocoon?) does not have any impact on this code/problem you show.

My 2 cents:

• you have a problem in your javascript code, this should be visible in the javascript console of the browser (once an error occurss, the browser stops parsing the rest of the code)
• verify that the element has the correct class (inspect the html)

If this field is dynamically inserted, using cocoon, then your code is wrong: it will only bind to available/visible items on the page.

Try something like

 $(document).on('change', '.user_roles_territory_select', function() { .... } )

which will capture events on the document level (which always exists, but you could also use your form for instance) and filter them (handle them) if they occured on the item with the correct class.

[mhassaan]

Thank you for the advice, I tried capturing the event on the document and it worked.

[kouroubel]

A more elegant solution would be to bind to newly added fields when link_to_add_association is clicked....

//this is needed for the newly added fields to respond to keyup/change/blur events. 
//add_fields is the class of the link_to_add_association button
 $(document).on("click", ".add_fields", function(){
    //binding code goes here
});

[nathanvda]

Mmmmmm this is a bit confusing: how is it more elegant, since the aforementioned solution

 $(document).on('change', '.user_roles_territory_select', function() { .... } )

will automatically handle all new instances, since it is checked on document level, no difficult house-holding to make sure each (new) occurence has the correct binding attached.

[kouroubel]

Never mind, I now understand what the original question was about and I was talking about something different. What I was talking about is update the amounts displayed in the colored badges and blue buttons, every time a text field or select field changes.

The way I got the newly added fields to work is like this

$(document).on("click", ".add_fields", function(){
      $('.cost').keyup(update_total_amounts);
      $('.qty').keyup(update_total_amountss);
      $('.discount').keyup(update_total_amounts);
      $('.vat').change(update_total_amounts);
      $('.tax').keyup(update_total_amountss);
      $('.items_select').blur(update_total_amounts); 
});