javascript - Rails - 在选项卡之间同步按钮点击

Question

我有一个带有 bootstrap-tabs 的 View 。标签是动态生成的。

<%= form_with(:id => 'my-form', model: [:admin, @island], local: true) do |form| %>
  <div class="tab-content bg-light" id="tabs-from-locales-content">

    <%= available_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">
        <%= render partial: 'island_form', locals: {counter: i, locale: locale, f: form} %>
      </div>
    <% end %>

  </div>

...
...

一个选项卡代表应用程序的每个可用本地化。表单模型包含两个嵌套属性。这些属性与模型具有一对多关系。因此用户可以从表单中添加多个。它们的字段可以动态生成:

(为简单起见，我只在问题中包含一个。这是 _island_form.html.erb 部分的一部分。)

<div class="form-group ports-div">
  <%= f.label :port %> </br>
  <%= f.fields_for :ports do |builder| %>

    <%= render 'port_fields', f: builder %>

  <% end %>
  <%= link_to_add_fields t('form.add_port'), f, :ports %>
</div>

<div class="form-group">
  <%= f.label :airport %> </br>
  <%= f.fields_for :airports do |builder| %>

    <%= render 'airport_fields', f: builder %>

  <% end %>
  <%= link_to_add_fields t('form.add_airport'), f, :airports %>
</div>

port_fields 部分:

<fieldset>
  <%= f.label :name %>
  <%= f.text_field :name, class: 'form-control' %>
  <%= f.hidden_field :_destroy %>
  <%= link_to t('form.remove'), '#', class: 'remove_fields' %>
</fieldset>

link_to_add_fields 辅助方法:

  def link_to_add_fields(name, f, association)
    # Builds an instance of the association record.
    new_object = f.object.send(association).klass.new
    # Grabbing ruby's object id.
    id = new_object.object_id
    fields = f.fields_for(association, new_object, child_index: id) do |builder|
      render(association.to_s.singularize + '_fields', f: builder)
    end
    link_to(name, '#', class: 'add_fields', data: { id: id, fields: fields.gsub('\n', '') })
  end

我想实现的是在可用选项卡之间同步添加和删除这些字段。因此，当用户在第一个选项卡上单击 Add field 时，所有其他选项卡都将遵循此操作。字段删除也是如此。

Add 按钮的相关 js 文件如下所示。我已经尝试了 trigger、triggerHandler 和 stopPropagation 之间的许多组合，尽管大多数时候我都遇到了 StackOverflow 异常 并且这些字段仅添加到我单击 add 按钮的选项卡。

(由于我在 选择器 中传递了一个类 (.add_fields)，所以不应该将其附加到具有类 .add_fields< 的所有元素?)

form.on('click', '.add_fields', function (event, param) {
    event.stopPropagation();
    event.preventDefault();

    var time = new Date().getTime();
    var regexp = new RegExp($(this).data('id'), 'g');
    $(this).before($(this).data('fields').replace(regexp, time));

    $('.tab-pane').each(function (index) {

        $('.add_fields').trigger("click", ["custom_click"]);
        console.log('Tab - ' + index);
    })
});

编辑

我正在使用该代码:

    $('.ports-div').each(function (index) {

        $(this).find('.add_fields').each(function () {
            this.click();
        })
    });

不过，在所有选项卡中，添加的不是 1 个字段，而是 6 个字段。我将 ports-div 添加到包装所有相关元素的 div。

Answer 1

完全重写...

如您所见，问题是您的click 事件处理程序触发了对所有选项卡 Pane 的单击，包括您当前正在处理的选项卡 Pane 。您也不只是单击循环中的单个项目，而是单击所有匹配“.add_fields”的项目。然后，这会导致再次以递归方式处理点击。

为防止这种情况，我建议调用一个函数来直接添加您的字段，而不是触发点击。如果在您的情况下触发点击是最简单的，请考虑以下示例，该示例大致执行您想要的操作，而不会出现递归错误。

https://jsfiddle.net/3ftf0j8e/1/

虚拟 HTML

<a class="add_fields" id='1'>link 1</a>    
<a class="add_fields" id='2'>link 2</a>    
<a class="add_fields" id='3'>link 3</a>    
<a class="add_fields" id='4'>link 4</a>

示例 Javascript

$(document).on('click', '.add_fields', function (event, param) {
    event.preventDefault();


    var clicked_id = $(this).attr('id');
    console.log('clicked id:' + clicked_id);

    $(this).addClass('done');
    $(this).addClass('clicked');
    // Just click items that have not been clicked
    var els = $('.add_fields').not('.clicked');
    console.log(els);    
    els.trigger("click");

    setTimeout(function(){
      if($('.add_fields').length == $('.add_fields.done').length)
        $('.add_fields').removeClass('clicked');
    })

});

CSS

a.clicked {
  background-color: yellow;
}

a.done {
  color: red;
}

正如您现在看到的，每个只触发一次。最后的 setTimeout 允许 DOM 在清除 clicked 类之前更新。