我在恢复具有传递给 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 .
最佳答案
您需要再次调用tooltip()
方法。或者,您应该在克隆/删除项目以清理数据之前销毁工具提示。
$('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();
});
关于javascript - 克隆并恢复 "tooltiped"元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29491673/