Bootstrap 4 Dropdown克隆后点击新菜单错误展开原菜单问题

• Bootstrap下拉菜单组件初始化后，会将组件实例、关联菜单元素引用等状态数据存储在对应DOM节点的jQuery缓存中，同时会绑定专属的点击事件处理器。
• 你使用clone(true)方法克隆节点时，会同步克隆原节点的所有绑定事件、jQuery缓存数据。如果克隆前已经触发过原下拉菜单的展开操作，原节点缓存的组件实例已经绑定了原菜单元素的引用，克隆得到的新下拉菜单会复用这个旧实例，点击时自然会控制原菜单的展开收起，而不是操作自身对应的新菜单。

可任选以下一种方案修复：

方案1：克隆后重新初始化新下拉菜单 #

克隆时不同步原有事件和数据，追加到容器后手动重新初始化下拉菜单即可，修改JS代码如下：

$("#btnClone").click(function () {
    var c = $("div.dropdown").clone(false);
    // 清空容器追加新节点后，重新初始化新的下拉菜单
    $("#clone").empty().append(c).find('.dropdown-toggle').dropdown();
});

方案2：使用未初始化的模板做克隆源 #

提前将下拉菜单代码存入隐藏的模板容器，避免模板被Bootstrap提前初始化，从根源避免状态冲突问题，代码示例如下：
新增隐藏模板：

<!-- 隐藏的下拉菜单模板 -->
<div id="dropdownTpl" style="display:none">
    <div class='dropdown'>
        <button class="btn dropdown-toggle" type="button" data-toggle="dropdown">Menu</button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Item 1</a>
            <a class="dropdown-item" href="#">Item 2</a>
        </div>
    </div>
</div>

<button id="btnClone" type="button">Clone</button>
<div id="clone"></div>

对应JS代码：

$("#btnClone").click(function () {
    var c = $("#dropdownTpl .dropdown").clone();
    $("#clone").append(c);
});

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