Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >克隆和恢复“工具提示”元素

克隆和恢复“工具提示”元素
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

复制
相关文章
R语言实现混合模型
普通的线性回归只包含两项影响因素,即固定效应(fixed-effect)和噪声(noise)。噪声是我们模型中没有考虑的随机因素。而固定效应是那些可预测因素,而且能完整的划分总体。例如模型中的性别变量,我们清楚只有两种性别,而且理解这种变量的变化对结果的影响。 那么为什么需要 Mixed-effect Model?因为有些现实的复杂数据是普通线性回归是处理不了的。例如我们对一些人群进行重复测量,此时存在两种随机因素会影响模型,一种是对某个人重复测试而形成的随机噪声,另一种是因为人和人不同而形成的随机
机器学习AI算法工程
2018/03/14
4.4K0
什么时候使用Dockerfiles(什么时候不使用……)
在这篇文章中,我们将讨论一些使用 Dockerfile 的最佳实践,探索一些注意事项,并使用 Dockerfile 和云原生 Buildpacks 构建应用。你将了解每种工具最擅长的工作是什么,以及如何决定何时使用它们。
CNCF
2021/12/15
1.7K0
什么时候使用Dockerfiles(什么时候不使用……)
R语言使用混合模型进行聚类
让我们通过一个例子激发您为何使用混合模型的原因。让我们说有人向您展示了以下密度图:
拓端
2020/07/16
1.3K0
R语言 线性混合效应模型实战案例
处理分组数据和复杂层次结构的分析师,从嵌入在参与者中的测量,嵌套在州内的县或嵌套在教室内的学生,经常发现他们需要建模工具来反映他们数据的这种结构。在R中,有两种主要的方法来拟合多级模型,这些模型考虑了数据中的这种结构。这些教程将向用户展示如何使用lme4R中的包来拟合线性和非线性混合效果模型,以及如何使用rstan以完全适合贝叶斯多级模型。这里的重点是如何使模型适合R而不是模型背后的理论。有关多级建模的背景知识,请参阅参考资料。
拓端
2020/11/19
1.4K0
MATLAB 与 C 语言的混合编程
MATLAB 与 C 语言的接口采用称为 MEX 的动态链接方式进行。MEX 文件是由 C/C++ 源程序经过编 译生成的 MATLAB 动态链
glm233
2020/09/28
3.5K0
MATLAB 与 C 语言的混合编程
什么时候用Goroutine?什么时候用Channel?
什么场景下用channel合适呢? 通过全局变量加锁同步来实现通讯,并不利于多个协程对全局变量的读写操作。 加锁虽然可以解决goroutine对全局变量的抢占资源问题,但是影响性能,违背了原则。 总结:为了解决上述的问题,我们可以引入channel,使用channel进行协程goroutine间的通信。 Go语言中的操作系统线程和goroutine的关系: 一个操作系统线程对应用户态多个goroutine。 go程序可以同时使用多个操作系统线程。 goroutine和OS线程是多对多的关系,即m:n。 Go
王中阳Go
2022/10/26
9660
R语言 线性混合效应模型实战案例
首先,请注意,围绕多级模型的术语非常不一致。例如,多级模型本身可以称为分级线性模型,随机效应模型,多级模型,随机截距模型,随机斜率模型或汇集模型。根据学科,使用的软件和学术文献,许多这些术语可能指的是相同的一般建模策略。
拓端
2020/08/10
1.8K0
R语言学习中什么时候是突飞猛进?
我看到大牛的代码,我查看R包源码的编写,感觉自己才刚刚入门,还有很多东西要学,要掌握。此小大之辩也。感觉上面的阶段只是入门的不同阶段而已,就像幼儿园,分为小班,中班,大班,自己的水平相比大牛,仅仅是刚入门。
邓飞
2019/12/05
3720
基于R语言的lmer混合线性回归模型
混合模型在很多方面与线性模型相似。它估计一个或多个解释变量对响应变量的影响。混合模型的输出将给出一个解释值列表,其效应值的估计值和置信区间,每个效应的p值以及模型拟合程度的至少一个度量。如果您有一个变量将您的数据样本描述为您可能收集的数据的子集,则应该使用混合模型而不是简单的线性模型。
拓端
2020/08/21
4.3K0
基于R语言的lmer混合线性回归模型
《基于混合方法的自然语言处理》译者序
随着智能音箱走进千家万户,基于人工智能的产品与服务切实地来到了我们的身边。我们对智能音箱说话,问天气,定闹钟,听音乐,交流是如此的自然,这就是人工智能给我们带来的便利。
半吊子全栈工匠
2021/09/27
4780
R语言:EM算法和高斯混合模型的实现
期望最大化(EM)算法是用于找到最大似然的或在统计模型参数,其中该模型依赖于未观察到的潜变量最大后验(MAP)估计的迭代方法。期望最大化(EM)可能是无监督学习最常用的算法。
拓端
2020/08/20
1.7K0
R语言:EM算法和高斯混合模型的实现
什么时候调用layoutSubviews
如果你想强制更新布局,不要直接调用此方法。你可以调用setNeedsLayout方法;如果你想立即数显你的views,你需要调用layoutIfNeeded方法。
全栈程序员站长
2022/09/13
4270
R语言实现有限混合模型建模分析
有限混合模型在应用于数据时非常有用,其中观察来自不同的群体,并且群体隶属关系未知。
拓端
2020/07/16
4860
基于R语言混合效应模型(mixed model)案例研究
混合模型在很多方面与线性模型相似。它估计一个或多个解释变量对因变量的影响。混合模型的输出将为解释值列表,它们的效果大小的估计值和置信区间,每种效果的p值以及至少一种模型拟合程度的度量。当您有一个变量将数据样本描述为可以收集的数据的子集时,应该使用混合模型而不是简单的线性模型。
拓端
2022/04/14
2.7K0
基于R语言混合效应模型(mixed model)案例研究
什么时候索引失效
强制走索引 使用explain执行计划看,走的那个查询范围是什么,影响行数是多少,是否走了全表查询
2021/09/07
3280
什么时候,使用Excel?
极力推崇PowerBI是创作PowerBI大师的初衷,虽然从Excel到PowerBI有极其诱人的理由,但我们不可否认的是Excel本身作为全世界最广泛的办公工具它具有不可替代的应用场景。
公众号PowerBI大师
2019/08/07
2K0
什么时候,使用Excel?
R语言用Rshiny探索lme4广义线性混合模型(GLMM)和线性混合模型(LMM)
随着软件包的进步,使用广义线性混合模型(GLMM)和线性混合模型(LMM)变得越来越容易。由于我们发现自己在工作中越来越多地使用这些模型,我们开发了一套R shiny工具来简化和加速与对象交互的lme4常见任务。
拓端
2020/11/19
1.8K0
R语言用Rshiny探索lme4广义线性混合模型(GLMM)和线性混合模型(LMM)
JS WeakMap 什么时候用?
携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第21天,点击查看活动详情
掘金安东尼
2022/09/22
2.1K0
JS WeakMap 什么时候用?
在Python中什么时候用Yield什么时候用Return
在Python中,使用yield和return的关键字来定义生成器函数,生成器函数可以用于避免一次性计算所有值,而是在需要时生成它们。生成器函数使用yield语句来暂停和恢复其执行,并允许保存状态信息。当恢复时,生成器函数从上次yield语句的位置继续执行,并继续生成值。生成器函数可以包含多个yield语句,以产生一系列值。生成器函数还可以使用return语句来提前终止,并返回一个值。在Python中,生成器函数是一种非常强大的工具,可以帮助程序员节省内存,提高代码的效率。"
大数据弄潮儿
2017/12/21
2.4K0
在Python中什么时候用Yield什么时候用Return
入门科普:什么时候要用Python?用哪个版本?什么时候不能用?
Python使用面向对象编程(object-oriented programming,OOP)和构造,你可以像任何其它面向对象的语言一样使用它,譬如Java。
IT阅读排行榜
2018/08/13
1.2K0
入门科普:什么时候要用Python?用哪个版本?什么时候不能用?

相似问题

混合语言框架

39

检测混合语言php

14

混合语言CUDA编程

17

Rails混合模板语言

20

新语言混合示例

11
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

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

洞察 腾讯核心技术

剖析业界实践案例

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