Rails 3-nested_form gem nested：fieldAdded似乎未觸發

Question

我使用的nested_form gem效果很好，直到我嘗試基於github示例為nested：fieldAdded事件實現一個jquery調用。 這是相關的視圖代碼：

<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>

為了處理“ nested：fieldAdded：details” jquery調用，我在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);
});