Bootstrap 切换复选框添加额外 div

Question

我们有一个表单，用户可以在其中通过在文本字段中输入名称并可选择切换复选框来创建运输类型。要添加另一种运输类型，我们使用 jQuery 的克隆方法重建字段一次或多次。

我的目标是使用 bootstrap-toggle 将复选框更改为切换。这对于第一次切换工作正常，但后续的克隆字段集失败。

我已将我的初始代码精简为最基本的示例，试图让它发挥作用但无济于事：

<div id="shipping_fields" class='shipping_fields'>
    <input id="shippings_hide_1" name="shippings1[hide][]" type="checkbox" value="0" data-toggle="toggle" class="hidden">
</div>
<span class='go indent padbot instruction clear'><a href="#" id="add_shipping_button"><i class='fa fa-plus-circle'></i> Add Another Shipping Option</a></span>

<script type="text/javascript">
  function addShippingToPage(event) {
    event.preventDefault();
    $('#shipping_fields').clone().show().
      removeAttr('id').
      insertAfter('.shipping_fields:last')
  }
  function removeShippingFields() {
    $('#shipping_fields_template').remove()
  }
  jQuery("#add_shipping_button").click(addShippingToPage);
  jQuery("#new_event").submit(removeShippingFields);
</script>

Bootstap-toggle 在页面加载时将我的复选框转换为如下所示，并且切换正常：

<div id="shipping_fields" class="shipping_fields">
    <div class="toggle btn btn-default off" data-toggle="toggle" style="width: 58px; height: 34px;">
        <input id="shippings_hide_" name="shippings[hide][]" type="checkbox" value="0" data-toggle="toggle" class="hidden">
        <div class="toggle-group">
            <label class="btn btn-primary toggle-on">On</label>
            <label class="btn btn-default active toggle-off">Off</label>
            <span class="toggle-handle btn btn-default"></span>
        </div>
    </div>
</div>

当我使用 addShippingToPage 函数添加另一个字段时，克隆的 HTML 看起来完全一样。但是，当我尝试切换按钮时，它最终会在第一个开口 div 内创建前面 bootstrap-切换代码的完整副本，当然切换无法移动。

我已经尝试了所有我能想到的方法——包括尝试使用克隆失败的 Boostrap-switch，以及重命名类和 ID 以确保区分——但我无法让它工作。任何指导表示赞赏！

Answer 1

问题是 Bootstrap 在已经存在的代码中生成新的 "bootstrap-toggle" 代码。因此，您需要在没有 "bootstrap-toggle" 代码的情况下克隆 div，然后通过 jquery.

添加到其中

您的输入应该是一个普通的复选框（没有 data-toggle="toggle"）：

<input id="shippings_hide_1" name="shippings1[hide][]" type="checkbox" value="0" class="hidden">

并且您的 addShippingToPage 函数应该将 "bootstrap-toggle" 代码带到您的新复选框中。

function addShippingToPage(event) {
  event.preventDefault();
  $('#shipping_fields').clone().show().
     removeAttr('id').
     insertAfter('.shipping_fields:last');
  $("input:last").bootstrapToggle(); // This will add "bootstrap-toggle" only to the last checkbox.
}

Bootstrap 切换复选框添加额外 div

Bootstrap Toggle for Checkbox adding extra div

jquery

checkbox

toggle

clone

bootstrap-switch