导轨引导选项卡。选项卡中的拖放区不起作用

Question

i动态创建bootstrap选项卡，每个选项卡都有一个 partial

<ul class="nav nav-tabs" id="tabs-from-locales" role="tablist">
  <% @locales.each_with_index do |locale, i| %>
      <li class="nav-item">
        <a class="nav-link <%= 'active' if i == 0 %>"
           id="<%= locale.downcase %>-locale-tab"
           data-toggle="tab" href="#<%= locale.downcase %>"
           role="tab"
           aria-controls="<%= locale.downcase %>"
           aria-selected="true"><%= locale %></a>
      </li>
  <% end %>
</ul>
<div class="tab-content" id="tabs-from-locales-content">
  <%= @locales.each_with_index do |locale, i| %>
      <div
      class="tab-pane fade <%= 'show active' if i == 0 %>"
      id="<%= locale.downcase %>"
      role="tabpanel"
      aria-labelledby="<%= locale.downcase %>-tab"> A + <%= i %> <%= render 'form' %> </div>
  <% end %>
</div>

部分是form，它与dropzone Div。

有另一部分

<%= form_with(:id => 'my-form', model: [:admin, @island], local: true, 
    html: {id: 'myForm'}) do |f| %>
       ....
       ....
        <div class="form-group">
          <%= render partial: 'shared/dropzone', locals: {upload_url: admin_pictures_path, thumbnail_urls: @thumbnail_urls} %>
        </div>
        <%= f.submit class: 'btn btn-primary' %>
    <% end %>

dropzone部分包括Dropzone设置。

dropzone通常在第一个选项卡上工作，尽管在其他选项卡上似乎没有初始化，并且fallbackdiv是可见的。

我有一个js文件，可以初始化并配置我的dropzone设置。

document.addEventListener("turbolinks:load", function () {
    if (document.getElementById('picture_dropzone')) {
        console.log("element found.")
        Dropzone.autoDiscover = false;
        // noinspection JSUnusedGlobalSymbols
        var pictureDropzone = new Dropzone('div#picture_dropzone', {
        ....
        ....
     }

有什么想法dropzone在其他选项卡上无法初始化？

Answer 1

看起来您正在使用ID #picture_dropzone来搜索所有dropzone元素。当然，您只能有一个元素具有一定的ID；具有该ID的其他元素将被忽略。这就是为什么只初始化第一个dropzone而不是其余的。

如果将类（.picture_dropzone）添加到dropzone Divs，则可以搜索并搜索将返回所有dropzone Divs，而不仅仅是第一个Divs。