首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >克隆和恢复“工具提示”元素

克隆和恢复“工具提示”元素
EN

Stack Overflow用户
提问于 2015-04-07 04:31:32
回答 3查看 2.2K关注 0票数 9

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

具体而言:$('footer p')被传递给document的工具提示,如下所示:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$(function(){

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

})

我检查它,工具提示工作,点击控制台消息出现。现在,通过调用函数,从控制台备份将要删除和删除的内容:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function experiment_destroy() {
window.backup = $('footer').clone(true, true);
$('footer p').remove();
}

正如所料,页脚的p消失了。

现在,我使用以下方法还原在window.backup变量中克隆和缓存的内容:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function experiment_restore(){
    $('footer').empty();
    $('footer').replaceWith(window.backup);
}

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

  • footer p元素以应有的方式返回。
  • 单击footer p生成控制台消息“只用于测试事件”消息,因此该事件与元素一起还原。
  • 没有工具提示被还原为

即使我在函数experiment_restore中重新调用工具提示方法,我也什么也得不到。有人有什么想法吗?

更新:,我又做了一个变体。尝试使用不同的-完全最小的DOM环境,只对p进行tooltip和父容器元素。结果是相同的。当然,在我复杂的DOM结构中,不只是一些东西把事情搞砸了。

这是非常简单的Fiddle

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2015-04-10 03:48:59

对于您在问题中显示的场景,我将使用$().detach()从DOM中删除它,同时保持事件处理程序和添加到DOM的数据与$().data()保持完整。关于你所提出的问题:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$('#destroy').click(function(){
    var $footer_p = $('footer p');
    window.backup = $footer_p;
    $footer_p.detach();
})

$('#restore').click(function(){
    var $footer = $('footer');
    $footer.append(window.backup);
});

这里有一个更新的小提琴

幕后发生的事情是,Bootstrap使用$().data()将类Tooltip的JavaScript对象添加到DOM元素中,并添加了一组事件处理程序。你需要保存这些。

如果由于某种原因不能使用$().detach(),则必须通过调用$().tooltip()重新创建工具提示。

为什么$().clone(true, true)不能工作?

您使用参数调用$().clone()来深入克隆DOM层次结构,并使用$().data()保留事件处理程序和数据集,那么为什么它不能工作呢?克隆不是应该有一个引用的Tooltip对象创建的引导吗?

是的,事件处理程序被保留下来,并且克隆确实有一个对Tooltip对象的引用。但是,这个对象本身并不是克隆出来的。更重要的是,它不适合引用$().clone()创建的新DOM节点。(因此,即使jQuery克隆了它,它仍然不能工作。)它确实收到了触发工具提示的事件,但是Tooltip.prototype.show执行以下检查:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  var inDom = $.contains(this.$element[0].ownerDocument.documentElement, this.$element[0])
  if (e.isDefaultPrevented() || !inDom) return

如果inDom在DOM中,则this.$element变量将为真。但是,这是指为其创建工具提示的原始元素,而不是克隆。由于该元素已不在DOM中,所以inDom为false,下一行将返回,因此工具提示永远不会显示。

对于咯咯笑,使用创建引导工具提示的DOM元素的克隆,不要删除原始元素,而是将克隆添加到页面的其他地方。然后触发克隆上的工具提示。工具提示将出现在原始元素上。:)

我上面描述的是Bootstrap的jQuery插件的一般工作方式:他们使用$().data()将JavaScript对象添加到它们操作的元素中。还有一个用于下拉的Dropdown类,一个用于modals的Modal类,等等。

票数 3
EN

Stack Overflow用户

发布于 2015-04-09 04:55:50

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

工频

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$('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();
});
票数 7
EN

Stack Overflow用户

发布于 2020-12-06 12:52:56

作为一个补充答案,我使用了JQuery的克隆方法,但是我复制了所有的事件侦听器,比如.clone(true, true)。我的问题是,工具提示与旧元素和克隆元素完全相同,但它们位于不同的位置(因此,在新元素上盘旋会在浏览器的左上角显示工具提示)。

我能想到的最简单的修复方法应该适用于所有Javascript,Bootstrap,JQuery,永远是:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const target = document.getElementById("random-div-you-want-to-clone-to")
$("selecting").clone(true, true).appendTo(target);

// if you only want .innerHTML of $("selecting")
// you can do $("selecting").children()

const _tooltips = target.querySelectorAll("[data-toggle='tooltip']");
for (const x of _tooltips) {
    const build = x.cloneNode(true);
    $(build).tooltip();
    x.parentNode.replaceNode(build, x);
}

因此,.clone(true, true)将抓取所有事件侦听器,包括"mousedown“,即工具提示的侦听器。当您使用本机ECMAScript的cloneNode方法时,您不会获得事件侦听器,因此需要重置工具提示。

这不是最有效率的,但我花了一个小时努力想些什么.作为我的客人,在寻找一个更有效的方法,因为这个方法不是,但它的工作。(例如使用forEach,直接使用JQuery等等)。

编辑:您还可以在克隆时使用.children()获取$("selecting")的内部(即其子),而不是获取它和其子节点。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/29491673

复制
相关文章
将VOC格式的数据集转换为COCO格式
import xml.etree.ElementTree as ETimport osimport json coco = dict()coco['images'] = []coco['type'] = 'instances'coco['annotations'] = []coco['categories'] = [] category_set = dict()image_set = set() category_item_id = -1image_id = 20180000000annotation_id
狼啸风云
2021/06/09
3.2K0
python将webp格式的图片转换为png格式
#!/usr/bin/env python # -*- coding:utf-8 -*- import os import time from multiprocessing.dummy import Pool from PIL import Image # tinypng 批量将文件夹下的webp文件转换为png格式 def convert(pic): pic_list = pic.split('.') name = pic_list[0] # print(name)
槽痞
2020/06/23
2.4K0
MariaDB修改编码格式 转
2、登录MySQL,使用 show variables like ‘character%’;
双面人
2019/04/10
2K0
MariaDB修改编码格式
                                                                            转
Net任意String格式转换为DateTime类型
方式一:Convert.ToDateTime(string) Convert.ToDateTime(string) 注意:string格式有要求,必须是yyyy-MM-dd hh:mm:ss 方式二:Convert.ToDateTime(string, IFormatProvider) DateTimeFormatInfo dtFormat = new System.GlobalizationDateTimeFormatInfo(); dtFormat.ShortDatePattern = "yyyy/MM
磊哥
2018/05/08
1.1K0
开源工具将Markdown格式转换为微信公众号格式
工具不仅能完美转换Markdown格式到微信公众号格式,还能把链接自动转换为参考文献索引,并且附在文字末尾
zhaoolee
2019/03/20
1.9K0
开源工具将Markdown格式转换为微信公众号格式
将png格式的图像转换为jpg
import osfrom PIL import Imagedirname_read="D:\dataset\cityscapes\cityscape_voc_clean\JPEGImages_png\\"dirname_write="D:\dataset\cityscapes\cityscape_voc_clean\JPEGImages_jpg\\"names=os.listdir(dirname_read)count=0for name in names: img=Image.open(dirna
狼啸风云
2020/07/16
2.3K0
数据编码格式_excel编码格式
ascii编码,即美国标准协会制定的编码规范,采用一个字节表示的128个字符,其中95个可见字符,33个不可见字符。
全栈程序员站长
2022/09/20
1.4K0
怎样高质量将高清图片jpg格式转换为pdf格式?
1、点击[1.jpg] 2、点击[转换为Adobe PDF] 3、点击[文件] 4、点击[保存] 5、点击[桌面] 6、点击[保存] 7、点击[1.pdf]
裴来凡
2022/05/28
1.2K0
怎样高质量将高清图片jpg格式转换为pdf格式?
PDF转PPT格式混乱?PaperCloud助你将PDF转PPT保持格式不变
网络上很多精明的PPT都转成PDF格式,PDF格式是不能编辑不能修改的,给了我们使用带来很大不变。有没有办法让PDF转PPT并且能还原原来的格式呢?今天小编给推荐大家使用【PaperCloud】文档转换功能中的PDF转PPT,专业的第三方转换器,能够保证PDF转PPT格式不混乱。而且无需安装软件,页面打开即可使用。
用户9786412
2022/05/29
3.3K1
PDF转PPT格式混乱?PaperCloud助你将PDF转PPT保持格式不变
编码格式
一、请求编码 1.1 直接在地址栏中给出中文 请求数据是由客户端浏览器发送服务器的,请求数据的编码是由浏览器决定的。例如在浏览器地址栏中给出:http://localhost:8080/hello/
星哥玩云
2022/09/14
1.2K0
【BERT系列】—— 将Tensorflow格式的模型转换为Pytorch格式的模型
以BERT为代表的预训练模型是目前NLP领域最火热的方向,但是Google发布的 BERT 是Tensorflow格式的,这让使用pytorch格式 程序猿 们很为难。
Dendi
2019/12/26
3.4K0
【BERT系列】—— 将Tensorflow格式的模型转换为Pytorch格式的模型
将 Word 转换为 Markdown格式【详细版本】2022.5.6
(2) Word 格式 另存为Markdown(这是最关键的一步~) (3)转换后的.md文档这里用vscode打开查看效果
MIKE笔记
2023/03/22
4.2K0
将 Word 转换为 Markdown格式【详细版本】2022.5.6
xlsx转格式为csv时,编码格式不兼容导致打不开。
1、按<Ctrl+H>键 2、点击[查找内容] 3、点击[替换为] 4、点击[全部替换] 5、点击[另存为] 6、点击[编码] 7、点击[UTF-8] 8、点击[保存] 9、点击[文件名] 10、点击[保存类型] 11、点击[所有文件] 12、点击[保存]
裴来凡
2022/05/28
2.3K0
xlsx转格式为csv时,编码格式不兼容导致打不开。
教你如何免费将XPS转换为PDF格式
XPS文件在我们日常工作中使用比较少,大部分时候我们都会将它转换成PDF格式后进行修改或保存等操作,不懂这种文档要怎么打开?其实这些都不重要,只要你知道PDF就可以,教你几种将XPS转成PDF的方法,还有免费使用哦。
全栈程序员站长
2022/09/05
1.4K0
IEEE参考文献格式
由于国外期刊参考文献与国内参考文献的格式有很大区别,其中最常用的参考文献为会议论文、书籍、期刊文献,所以特别在此记录说明,方便以后使用。   会议论文(Published Conference Proceedings style)   [1]     作者,“文章名字,”会议名称,地点,年份,页码   [1]     S. P. Bingulac, “On the compatibility of adaptive controllers ,” in Proc. 4th Annu. Allerton Conf. Circuits and Systems Theory, New York, 1994, pp. 8–16.   书籍(Book style).   [2]     作者,书籍名称,出版地,年份,页码   [2]     W.-K. Chen, Linear Networks and Systems Belmont, CA: Wadsworth, 1993, pp. 123-135.   期刊杂志(Periodical style)   [3]     作者,“文章名字,”期刊名,卷数,页码,月份,年份   [3]     J. U. Duncombe, “Infrared navigation-Part I: An assessment of feasibility ,” IEEE Trans. Electron Devices, vol. ED-11, pp. 34-39, Jan. 1959.
百川AI
2021/10/19
1.6K0
常用编码格式介绍_数据库编码格式
编程过程中经常会遇到各类字符的编码方式,经常会混淆,在此总结下常用的编码方式以及其原理。
全栈程序员站长
2022/09/20
3.6K0
常用编码格式介绍_数据库编码格式
NV12数据格式转H265编码格式实现过程
在视频处理和传输应用中,将视频数据编码为高效的格式是非常重要的。H.265(也称为HEVC)是一种先进的视频编码标准,具有更好的压缩性能和图像质量,相比于传统的编码标准(如H.264),可以显著减少视频的带宽和存储需求。
DS小龙哥
2023/09/11
9790
NV12数据格式转H265编码格式实现过程
java localdatetime转date_java编码格式转换
上篇文章介绍了Java8和Java8之前的时间处理的相关类,但是在日常开发中难免会遇到Java8和之前的旧对象互转的需求。我整理了一下之前的内容,做了一个工具类,如下:
全栈程序员站长
2022/11/09
7660
将读取的文本内容转换为特定格式
在完成小组作业的过程中,我们开发的“游客信息管理系统”中有一个“查询”功能,就是输入游客的姓名然后输出全部信息。要实现这个功能就需要从保存到外部的目录中读取文本并且复原成原来的形式。
算法与编程之美
2023/08/22
1760
将读取的文本内容转换为特定格式
点击加载更多

相似问题

谷歌应用引擎能与phonegap应用一起使用吗?

13

Django中间件不工作模板

124

Scrapy spider不能与crawlera中间件一起工作

222

django-cors-中间件不工作。

10

LsitFragment能与ListView一起工作吗?

14
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文