Rails 4 - nested_form和selected-select

时间:2014-08-30 18:35:07

标签: javascript jquery css ruby-on-rails ruby-on-rails-4

我正在使用Ryan Bates nested_form_for:https://github.com/ryanb/nested_form。对于我的select语句,我使用selected-select:http://harvesthq.github.io/chosen/。当我点击“添加技巧”时,我无法将select语句也变为class:'selected-select'。显示一个新的选择字段,但它没有自定义的CSS样式。

更清楚的是,原始的select语句正确显示,而我添加的语句没有自定义css样式(selected-select)。

<%= nested_form_for(@user) do |f| %>    
    <%= f.fields_for :skills do |builder| %>
            <%= builder.select :skill, data, {},  {class: 'chosen-select'} %>
            <%= builder.date_select :expdate, include_blank: true %>
            <%= builder.link_to_remove "Remove" %>
    <% end %>

        <%= f.link_to_add "Add Skill", :skills %>
<% end %>

有没有办法让我通过link_to_add函数添加的select语句使用'selected-select'类?

1 个答案:

答案 0 :(得分:2)

我认为你的问题是'选择的插件'在页面加载时对元素进行更改,一旦页面加载,添加的新元素不会更改,至少你再次调用该函数。我会在添加新元素的click事件上调用函数。像这样:

$('#add-element').on 'click', ->
  $('.chosen-select').chosen()

我正在阅读nested_form的文档,在您的情况下,我认为是这样的:

$(document).on 'nested:fieldAdded, (event)->
  $('.chosen-select').chosen()

或者,更像是说文档

$(document).on 'nested:fieldAdded, (event)->
  field = event.field
  detefield = field.find('.chosen-select')
  datefield.chosen()

我认为这有效!

PD:代码js是Coffescript。

PD2:我认为cocoon gem最适合这份工作。