Question

我们有一个表单，用户可以通过在文本字段中输入名称来创建发货类型，也可以选中切换复选框。要添加其他送货类型，我们使用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中创建前面的bootstrap-toggle代码的完整副本，当然切换器无法移动。

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

Answer 1

问题是Bootstrap正在生成一个新的＆＃34; bootstrap-toggle＆＃34;已经存在的代码内部。因此，您需要克隆div而不使用＆＃34; bootstrap-toggle＆＃34;代码，然后通过jquery添加到它。

您的输入应为普通复选框（不含data-toggle="toggle"）：

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

你的addShippingToPage函数应该带来＆＃34; bootstrap-toggle＆＃34;代码到新的复选框。

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.
}

Checkstrap切换为Checkbox添加额外的div

1 个答案: