使用jQuery.Clone(True)克隆后Bootstrap5 Toggle无响应问题

问题背景 #

使用Bootstrap5 Toggle插件实现模块切换功能，每行项包裹在.lineitem-wrapper容器中，容器内的输入框、span等元素事件正常。但通过jQuery.clone(true)克隆该容器后，克隆元素中的Bootstrap5 Toggle完全无响应，尝试销毁并重新初始化Toggle也无法解决问题。

问题原因 #

Bootstrap5 Toggle初始化时会将原始checkbox替换为自定义DOM结构，事件直接绑定在生成的动态元素上。使用clone(true)复制的是已被插件改造后的DOM，插件内部的状态和事件绑定逻辑无法被正确复制，导致克隆后的Toggle失效。此外，全局调用bootstrapToggle('destroy')会影响所有已初始化的Toggle，且克隆后初始化的目标元素选择或时机错误，也会导致失败。

解决方案 #

方案1：克隆后清理并重新初始化Toggle #

克隆时不复制插件绑定的无效事件，清理插件生成的DOM后重新初始化Toggle，同时手动绑定自定义事件：

$('.btn-lineitem-add-stkgl').on('click', function(e) {
  e.preventDefault();
  // 克隆元素，不复制事件（避免插件绑定的无效事件被复制）
  const new_lineitemStkGL = $('.lineitems-wrapper').last().find('.lineitem-wrapper').clone(false);
  
  // 移除插件生成的Toggle DOM，恢复原始checkbox
  new_lineitemStkGL.find('.check-moduleId').next('.toggle').remove();
  
  // 重新初始化克隆元素内的Toggle
  new_lineitemStkGL.find('.check-moduleId').bootstrapToggle({
    size: 'sm',
    onlabel: 'GL',
    offlabel: 'STK',
    onstyle: 'primary',
    offstyle: 'warning',
    checked: true
  });
  
  // 手动绑定自定义事件（如果原事件不是用委托绑定的）
  new_lineitemStkGL.find('.btn-lineitem-edit-stkgl').on('click', function() {
    // 此处写入原有的点击逻辑
  });
  
  $('.lineitems-wrapper').append(new_lineitemStkGL);
});

方案2：使用模板克隆（推荐） #

提前准备未初始化Toggle的HTML模板，每次添加时克隆模板并初始化Toggle，避免插件改造后的DOM冲突：

HTML模板

<!-- 隐藏的模板 -->
<div class="row lineitem-wrapper mb-1 d-none" id="lineitem-template">
  <div class="col-1 m-0">
    <input
      type="checkbox"
      class="pm-0 check-moduleId"
      data-size="sm"
      checked
      data-toggle="toggle"
      data-onlabel="GL"
      data-offlabel="STK"
      data-onstyle="primary"
      data-offstyle="warning">
  </div>
  <div class="col-3 pm-0 ">
    <div class="input-group">
      <input type="text" class="form-control input-lineitem-code px-1 " placeholder="Select Stock / GL ">
      <div class="input-group-prepend position-relative">
        <span class="input-group-text text-primary mdi mdi-magnify border-bottom-0 px-1 btn-lineitem-edit-stkgl cursor-pointer"> </span>
      </div>
    </div>
  </div>
</div>

JavaScript代码

$('.btn-lineitem-add-stkgl').on('click', function(e) {
  e.preventDefault();
  // 克隆模板，移除隐藏类和模板ID
  const new_lineitemStkGL = $('#lineitem-template').clone(false).removeClass('d-none').removeAttr('id');
  
  // 初始化Toggle
  new_lineitemStkGL.find('.check-moduleId').bootstrapToggle();
  
  $('.lineitems-wrapper').append(new_lineitemStkGL);
});

关键说明 #

• 若自定义事件使用事件委托（如$(document).on('click', '.btn-lineitem-edit-stkgl', function(){...})），则无需手动绑定，委托事件会自动处理新生成的元素。
• 模板克隆方式更稳定，因为克隆的是未被插件修改的原始HTML结构，初始化时不会出现DOM冲突。

内容的提问来源于stack exchange，提问作者Nathan DevX