"selectize-dropdown-content" 动态创建新的 div 后为空
"selectize-dropdown-content" empty after dynamically creating new div
我正在使用 Rails、JQuery、Cocoon 和 Selectize 在页面上创建表单。该应用程序用于为餐厅创建菜单。
/menu/new 为您提供一个页面，您可以在其中输入菜单名称（例如 "Lunch"）以及一个显示 "add menu items" 的按钮和一个 "create menu" 按钮.这个想法是，当您单击以添加菜单项时，会出现一个带有类别、项目名称、价格和描述字段的表单。您可以根据需要添加任意数量的菜单项。
我的问题不是功能问题，因为一切正常。创建操作将根据需要创建菜单、菜单项和菜单项类别。我的问题是 Selectize。
单击 "add new menu item" 会出现我之前提到的菜单项表单，在该表单中 "Category" 是先前创建的类别的下拉列表。问题是，列表一次只为页面上的一种形式填充：
Like so
如您所见，只有最新的表单显示类别下拉列表中的任何数据。出现在页面上的前两个现在是空白的。数据仍然存在，但不可见。我不知道如何让以前的菜单项表单显示类别列表。
这纯粹是装饰性的，因为如果我点击 'create menu'，数据将正确保存。但是，如果您想在单击添加新菜单项后编辑类别，这确实会让人很痛苦。
这是JQuery：
$('form').on('cocoon:after-insert', function() {
$('.selectize').selectize();
});
和表格：
<div class="field">
<%= f.select :category_id, Category.all.pluck(:name, :id), {}, { class: "selectize" } %>
</div>
我希望你说的很清楚，但不确定如何用更少的文字来解释它。提前致谢！
恕我直言，$('.selectize').selectize(); 的连续调用将 "break" 先前 select 化 select-boxes。因此，我假设在构建视图时以某种方式为每个 select-box 调用该命令，这实际上只会使最后一个处于 "good" 状态。
因此您必须确保在创建表单时只调用一次。例如。类似于你的 menus.js.coffee :
$(document).on 'turbolinks:load', () ->
$('.selectize').selectize()
然后在你的 cocoon 回调中做类似下面的事情，只考虑新插入的 html（而不是 selectizing 所有 select-再次框）：
$('form').on 'cocoon:after-insert', (e, inserted_item) ->
$(inserted_item).find('.selectize').selectize()
我正在使用 Rails、JQuery、Cocoon 和 Selectize 在页面上创建表单。该应用程序用于为餐厅创建菜单。
/menu/new 为您提供一个页面，您可以在其中输入菜单名称（例如 "Lunch"）以及一个显示 "add menu items" 的按钮和一个 "create menu" 按钮.这个想法是，当您单击以添加菜单项时，会出现一个带有类别、项目名称、价格和描述字段的表单。您可以根据需要添加任意数量的菜单项。
我的问题不是功能问题，因为一切正常。创建操作将根据需要创建菜单、菜单项和菜单项类别。我的问题是 Selectize。
单击 "add new menu item" 会出现我之前提到的菜单项表单，在该表单中 "Category" 是先前创建的类别的下拉列表。问题是，列表一次只为页面上的一种形式填充：
Like so
如您所见，只有最新的表单显示类别下拉列表中的任何数据。出现在页面上的前两个现在是空白的。数据仍然存在，但不可见。我不知道如何让以前的菜单项表单显示类别列表。
这纯粹是装饰性的，因为如果我点击 'create menu'，数据将正确保存。但是，如果您想在单击添加新菜单项后编辑类别，这确实会让人很痛苦。
这是JQuery：
$('form').on('cocoon:after-insert', function() {
$('.selectize').selectize();
});
和表格：
<div class="field">
<%= f.select :category_id, Category.all.pluck(:name, :id), {}, { class: "selectize" } %>
</div>
我希望你说的很清楚，但不确定如何用更少的文字来解释它。提前致谢！
恕我直言，$('.selectize').selectize(); 的连续调用将 "break" 先前 select 化 select-boxes。因此，我假设在构建视图时以某种方式为每个 select-box 调用该命令，这实际上只会使最后一个处于 "good" 状态。
因此您必须确保在创建表单时只调用一次。例如。类似于你的 menus.js.coffee :
$(document).on 'turbolinks:load', () ->
$('.selectize').selectize()
然后在你的 cocoon 回调中做类似下面的事情，只考虑新插入的 html（而不是 selectizing 所有 select-再次框）：
$('form').on 'cocoon:after-insert', (e, inserted_item) ->
$(inserted_item).find('.selectize').selectize()