Bootstrap Tooltip在Div容器复制后失效问题咨询

这个问题我之前也碰到过，原因其实很直观：Bootstrap Tooltip是在页面首次加载时初始化绑定到现有DOM元素上的，你克隆出来的新Div属于动态生成的元素，并没有被Tooltip的初始化逻辑处理过，所以自然没法正常触发。另外你原有的克隆代码还有个小bug——先调用了$new_comp.find()但此时$new_comp还没定义，得先把顺序调对。

下面是修正后的完整解决方案：

步骤1：修复克隆代码的顺序与细节问题 #

先把克隆代码的逻辑顺序理顺，同时处理重复ID的问题（克隆后ID会重复，这是HTML规范不允许的，容易引发其他隐藏问题，建议移除或生成唯一ID）：

$("#Clonemulti").click(function () {
    var $div = $('div[id^="Clone_CompMulDet"]:last');
    // 先克隆元素再做后续操作
    var $new_comp = $div.clone();
    // 清空新元素里的输入框内容
    $new_comp.find('input:text,textarea').val('');
    // 给新Div生成唯一ID，避免重复
    var uniqueSuffix = Date.now();
    $new_comp.attr('id', 'Clone_CompMulDet_' + uniqueSuffix);
    // 同步修改子元素的ID，确保页面内ID唯一
    $new_comp.find('#vc_legal_owner').attr('id', 'vc_legal_owner_' + uniqueSuffix);
    $new_comp.find('#Clonemulti').attr('id', 'Clonemulti_' + uniqueSuffix);
    // 将新元素插入到目标位置
    $div.after($new_comp);
    // 关键步骤：给新元素里的Tooltip重新初始化
    $new_comp.find('[data-toggle="tooltip"]').tooltip();
});

步骤2：确保原始Tooltip正常初始化 #

别忘了在页面加载完成时，先初始化页面上原本存在的Tooltip：

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
});

原理说明 #

• 克隆操作只是复制了DOM的结构和属性，但Bootstrap Tooltip的事件监听、样式绑定等初始化逻辑不会自动作用于新生成的元素，所以必须手动调用.tooltip()来完成新元素的Tooltip初始化。
• 处理重复ID是很必要的，HTML页面内ID必须唯一，重复的ID会导致JS选择器出错、样式失效等一系列问题。

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