Bootstrap交换机目标不正确

Question

我正在处理自举交换机列表。我有两个类别：Facebook和Twitter。这些类别中的每一个都可以有多个开关。我的问题是唯一正常工作的开关是每个列表中的第一个开关。所以我可以正确切换Facebook的第一个开关，并正确切换Twitter的第一个开关。

问题出在哪里，如果我引入第二个开关。问题是第二个开关错误地切换了第一个开关。 （之后推出的任何交换机都是如此 - 因此Twitter的第5个交换机仍会切换第一个Twitter交换机。）

我在这里附上了事件处理程序：

if (typeof($.fn.bootstrapSwitch) != 'undefined') {
  $('form.bootstrap-switch-form').each(function () {
    var $form = $(this);
    var $checkbox = $form.find('input[type=checkbox]');
    $checkbox.bootstrapSwitch({
      size: $form.data('switch-size') || 'small'
    }).on('switchChange.bootstrapSwitch', function (event, data) {
      $form.submit();
      $checkbox.bootstrapSwitch('toggleReadonly');
    });
    $form.on('ajax:complete', function (e) {
      $checkbox.bootstrapSwitch('toggleReadonly');
    });
  });
}

在此函数结束时，所有内容都正确链接（我遍历调试器，所有内容都指向正确的位置）。

使用rails：

将每个表单呈现给页面

<%= form_for automation, remote: true, html: {class: 'bootstrap-switch-form automation-switch', autocomplete: 'off'} do |f| %>
  <% if automation.has_automationable? %>
  <%= f.hidden_field :automationable_id, value: automation.automationable_id %>
  <%= f.hidden_field :automationable_type, value: automation.automationable_type %>
<% end %>
<%= f.hidden_field :retailer_id, value: retailer_id %>
<%= f.hidden_field :category, value: category %>
<%= f.check_box :status, {id: category}, 'active', 'inactive' %>
<% end %>

它将页面呈现为： 现在，当我单击第二个开关（或任何开关）时，将调试器语句放在＆＃34; switchChange＆＃34;的单击处理程序中。事件，我看看event.target，它实际指向第一个开关。有关将此指向正确位置的任何想法吗？

另外，为了澄清，当我将鼠标悬停在chrome控制台中的第二个开关上时，它正在选择正确的表单。当我点击它时，调试器语句将触发并且＆＃34;这个＆＃34;在这种情况下指向不正确的复选框/表单。

更新

如果我点击＆＃34; on＆＃34;在开关的一侧，单击处理程序正确地为正确的开关工作。如果我点击＆＃34;不活动＆＃34;处理程序指向列表中的第一个开关。（/ p>）

Answer 1

为了将来参考，结果每个开关必须具有唯一的ID。 twitter的每个标签都是id =“twitter”。我更新了这个，所以每个标签都有一个唯一的ID，id =“twitter0”，id =“twitter1”等。全部修复。