Select tag jQuery change detection working fine in script, not working in Rails 4.2.x project with CoffeeScript

Question

We are attempting to detect a select tag change using jQuery / CoffeeScript in a view on our Rails 4.2 project. In our test JSFiddle, it is working fine.

However, in our Rails view, the button is working but the select tag change detection is not. We have the following in our profile index view:

<%= form_for current_user.profile, :url => url_for(:controller => 'profile'), :method => :POST do |f| %>
    <div id="inf_profile_settings">
        <table id="tags-table" style="width:100%">
            <tr>
                <th>Name</th>
                <th>Lunches</th>
            </tr>
            <tbody id="tags-table-body" class="tags-table-body">
                <%= f.fields_for :tags do |tag| %>              
                    <%= render "tag_fields", :f => tag %>            
                <% end %>
                <div class="test_tags_button_container">
                    <%= button_tag "Test Tags", :id => "test-tags-button", :class => "test-tags-button", :type => "button", 'data-no-turbolink' => 'true' %>
                </div>
            </tbody>
        </table>
    </div>
<% end %> 

The <%= render "tag_fields", :f => tag %> code is related to the _tag_fields partial that is loaded for each table row, which allows for dynamic row addition by the users. This is all that is within the _tag_fields partial:

<tr class='nested-fields'>
    <td><%= f.select :inf_acct_id, @inf_names %></td>
    <td><%= f.select :lunches, @lunches1 %></td> 
</tr>

Within profile.coffee, we have the following:

$(document).ready ->
    $("[id^='profile_attributes_'][id$='_inf_acct_id']").change(->
        alert "TestChange"
    )
    $(document).on 'click', '.test-tags-button', checkTestTagsButton

The "checkTestTagsButton" function is simply an alert and works fine. The select tag change detection is also an alert and is not working.

The framework we are using is automatically generating the IDs assigned to the select tags it renders from the _tag_fields partial. If you inspect them in Firebug, it is assigning the select IDs like this:

<select id="profile_tags_attributes_0_inf_acct_id" name="profile[tags_attributes][0][inf_acct_id]">

<select id="profile_tags_attributes_1_inf_acct_id" name="profile[tags_attributes][1][inf_acct_id]">

...and so forth. As shown, the framework is inserting an integer into the middle of the select ID based on the row, beginning with 0. This is why we use the string "[id^='profile_attributes_'][id$='_inf_acct_id']" to detect if any of select tags with an id beginning with "profile_attributes_" and ending with "inf_acct_id" were changed, as discussed in a separate post.

In our JSFiddle posted above, both the button and the select tag detection work fine, whereas in our Rails view, only the button works, for a reason we simply cannot determine.

Any assistance on this issue would be greatly appreciated.

Answer 1

try

$ ->
  for el in $("[id^='profile_attributes_']")
    $(el).on 'change', (e) ->
      console.log e.currentTarget, 'changed'

also try to replace change to input