1

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

我的目标是使用 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 中创建前面引导切换代码的​​完整副本，当然切换无法移动。

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

4

1 回答 1

1

问题是 Bootstrap 在已经存在的代码中生成了一个新的“bootstrap-toggle”代码。因此，您需要克隆div没有“bootstrap-toggle”的代码，然后通过 jquery 添加到它。

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

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

并且您的addShippingToPage函数应该将“引导切换”代码带入您的新复选框。

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.
}
于 2015-06-16T19:15:16.410 回答