Question

我使用Rails，JQuery，Cocoon和Selectize在页面上创建表单。该应用程序用于为餐厅创建菜单。

/menu/new为您提供了一个页面，您可以在其中输入菜单名称（例如＆＃34; Lunch＆＃34;）以及一个显示＆＃34;添加菜单项＆＃34;的按钮，以及＆＃34;创建菜单＆＃34;按钮。我们的想法是，当您单击以添加菜单项时，将显示一个表单，其中包含“类别”，“项目名称”，“价格”和“说明”字段。您可以根据需要添加任意数量的菜单项。

我的问题不是功能之一，因为一切正常。创建操作将根据需要创建菜单，菜单项和菜单项类别。我的问题是Selectize。

点击＆＃34;添加新菜单项＆＃34;为我提供了一个菜单项的表单，就像我之前提到的那样，以及那种形式＆＃34;类别＆＃34;是以前创建的类别的下拉列表。问题是，列表一次只填充页面上的一个表单：

Like so

如您所见，只有最新的表单显示“类别”下拉列表中的任何数据。页面上显示的前两个现在是空白的。数据仍然存在，但不可见。我无法弄清楚如何获取以前的菜单项表单来显示类别列表。

这纯粹是装饰性的，因为如果我点击“创建菜单”，数据将会正确保存。但是，如果要在单击以添加新菜单项后编辑类别，确实会让您感到痛苦。

这是JQuery：

$('form').on('cocoon:after-insert', function() { $('.selectize').selectize(); });

和表格：

<div class="field"> <%= f.select :category_id, Category.all.pluck(:name, :id), {}, { class: "selectize" } %> </div>

我希望这很清楚，不知道如何用更少的话来解释它。提前谢谢！

Answer 1

Imho连续拨打$('.selectize').selectize();将“打破”之前选择性选择框。所以我假设在构建你的视图时，你会调用每个选择框尝试该命令，这实际上只会使最后一个处于“良好”状态。

因此，您必须确保在创建表单时只调用一次。例如。类似于menus.js.coffee：

的内容

 $(document).on 'turbolinks:load', () ->
   $('.selectize').selectize()

然后在你的cocoon回调做类似下面的事情，只考虑新插入的html（而不是选择所有选择框）：< / p>

$('form').on 'cocoon:after-insert', (e, inserted_item) ->
  $(inserted_item).find('.selectize').selectize()

＆＃34; selectize-下拉含量＆＃34;动态创建新div

1 个答案: