Рельсы 3 - вложенный драгоценный камень nested_form:fieldAdded, кажется, не сработал

Question

Я использую гем nested_form, который прекрасно работает, пока не попытаюсь реализовать вызов jquery на основе примера github для события nested:fieldAdded. Вот соответствующий код представления:

<table class="table table-striped table-hover" id="details" >
    <th>Material</th>
    <th>Current Balance (lbs)</th>  
    <th>Net Weight</th>
    <th>Gross Weight</th>
    <th></th>       

    <%= f.fields_for :downstreamDetails, :wrapper => false do |dd| %>


    <tr class="fields">
    <td><%= dd.select :tb_product_type_id, options_from_collection_for_select( @productTypes, :id, :product_type, dd.object.tb_product_type_id), { :prompt => "Select Material"} , {:class =>"form-control col-sm-2" , :data => { remote: true, :url => getInventoryData_path(:location_id => @downstream.from_company_location_id) }  }   %></td>  
    <td nowrap="true"><%= dd.text_field :currentBalance, :value => (number_with_delimiter(dd.object.currentBalance)), :readonly => true, :class => "form-control"  %> </td>

    <td><%= dd.text_field :ship_total_net_weight, :value => (number_with_precision(dd.object.ship_total_net_weight, precision: 2)), :class =>"form-control col-sm-2" %></td>
    <td><%= dd.text_field :ship_total_gross_weight, :class =>"form-control col-sm-2" %></td>
    <td><%= dd.link_to_remove "Remove", :data => {:target => "#details"}, :class => "btn btn-primary btn-small btn-block" %></td>
    </tr>       

    <% end %>
</table>
</div>

<div class="row">   
<div class="col-md-2"><%= f.link_to_add "Add Material" ,:downstreamDetails, :data => {:target => "#details"}, :class => "btn btn-primary btn-small btn-block" %></div>  
</div>

Чтобы обработать вызов jquery "nested:fieldAdded: details", я добавил в свой файл application.js следующее:

$(document).on('nested:fieldAdded:details', function(event){
  // this field was just inserted into your form
  var selected = field.find("option:selected");

  alert(selected);

});

Это работало нормально, и я получил предупреждение, когда нажал ссылку "Добавить". Я хочу проверить все предыдущие поля сведений и удалить выбранные параметры из поля выбора нового поля сведений. Поскольку я новичок в jquery/js, я немного попробовал взломать и добавил несколько строк кода в метод app.js, который, как я думал, достиг бы моей цели. Они не работали, и предупреждение не сработало.

Теперь, когда я вернулся к исходному коду метода app.js, я все еще не могу получить предупреждение для срабатывания. Установка точек останова в файле с помощью инструментов разработки Safari и Firefox не работает, они никогда не появляются, когда я нажимаю "Добавить". Я также очистил кеш браузера и несколько раз перезапустил сервер, но все еще не могу воссоздать первоначальный тест, в котором я получил предупреждение. Почему событие не сработало, когда оно изначально произошло? Любая помощь будет принята с благодарностью, спасибо!

Answer 1

Хорошо, я нашел проблему. Когда я вернул файл application.js обратно в исходный код, который работал, я пропустил одно утверждение:

var field = event.field;

Так что мой полный.js должен был быть:

$(document).on('nested:fieldAdded', function(event){
  // this field was just inserted into your form
  var field = event.field; 
  // it's a jQuery object already! Now you can find date input
  var selected = field.find('option:selected').text();
  alert(selected);
});