javascript - 克隆并恢复 "tooltiped"元素

Question

我在恢复具有传递给 Bootstrap 的 .fn.tooltip() 方法的元素的 DOM 结构时遇到了麻烦。

具体来说:$('footer p') 在文档就绪事件中传递给工具提示，如下所示:

$(function(){

$('footer p').tooltip();
$('footer p').on('click', function(){
console.log('Just to test events')
});

})

我检查了一下，工具提示有效，点击控制台消息出现。现在我备份我要删除的内容，并通过调用函数从控制台删除它:

function experiment_destroy() {
window.backup = $('footer').clone(true, true);
$('footer p').remove();
}

正如预期的那样，页脚的 p 消失了。

现在我恢复克隆和缓存在 window.backup 变量中的内容:

function experiment_restore(){
    $('footer').empty();
    $('footer').replaceWith(window.backup);
}

也从控制台调用，下面是发生的情况:

• footer p 元素恢复正常
• footer p 点击时产生控制台消息“Just to test events”消息，所以此事件与元素一起恢复
• 未恢复任何工具提示。

即使我在函数 experiment_restore 中重新调用工具提示方法，我也一无所获。有人知道吗？

更新:我又做了一个变体。尝试了不同的 - 完全最小的 DOM 环境，只有 p 用于 tooltip 和父容器元素。 结果相同。在我复杂的 DOM 结构中肯定不仅仅是某些东西把事情搞砸了。

这里是 very simple Fiddle .

Answer 1

您需要再次调用tooltip() 方法。或者，您应该在克隆/删除项目以清理数据之前销毁工具提示。

Working Fiddle

$('footer p').tooltip();

$('#destroy').click(function(){
    // optionally remove bindings
    $('footer p').tooltip('destroy');

    window.backup = $('footer').clone();
    $('footer p').remove();
})

$('#restore').click(function(){
    $('footer').replaceWith(window.backup);

    // apply tooltip again
    //window.backup.find("p").tooltip();
    $('footer p').tooltip();
});