jquery onmouseover 更改 div 与单击相同不起作用答案

【问题标题】：jquery onmouseover change div works same with on click won't workjquery onmouseover 更改 div 与单击相同不起作用
【发布时间】：2019-01-11 17:47:35
【问题描述】：

我有一个模态，在这个模态中我加载动态生成内容。

这个内容里面是一个 div 和一个 .

现在我在图标上执行鼠标操作，显示 div，并获取数据属性以选择 div 并为 div 设置新文本 - 一切正常。

如果我尝试在点击时做同样的事情，它失败了，我不知道为什么？

失败意味着，点击触发，调用警报但不更新潜水（不显示它们） - 即使警报框告诉我来自数据属性“data-tooltipdest”的正确ID......我不明白了

这就是html

<div id="tooltip_name" class="tooltipboard">This text is show</div>
<i class="far fa-question-circle tooltipflag" data-tooltipdest="tooltip_name" data-tooltiptxt="this text on div"></i>

这就是脚本（放在基础文件中，而不是放在后面的动态部分中）

$(document).on("mouseover", ".tooltipflag", function() {
        alert("Click dest:"+$(this).attr("data-tooltipdest"));
        $("#"+$(this).attr("data-tooltipdest")).html("<span class=\"tooltip-close\" data-tooltipdest=\""+$(this).attr("data-tooltipdest")+"\">×</span>"+$(this).attr("data-tooltiptxt"));
        $("#"+$(this).attr("data-tooltipdest")).show();
    });
    $(document).on("click", ".tooltipflag, .tooltip-close", function(){
        $("#"+$(this).attr("data-tooltipdest")).hide();
    });

【问题讨论】：

标签： jquery

【解决方案1】：

如果您将鼠标悬停在图标上，则只会执行两个函数中的第一个，从而更新文本。现在无法单击该图标，因为将触发警报。将mouseover 更改为click 将允许执行这两个函数，因此您的文本将在之后更新和隐藏。

这是一个不隐藏 div 的示例：https://jsfiddle.net/y4jfkzte/

【讨论】：

是第一个函数显示，第二个隐藏 div。这就是我的问题 "$(document).on("click", ".tooltipflag"," 不会工作，只有 "$(document).on("mouseover", ".tooltipflag"," 工作 - 我不知道为什么
不会起作用的意思是，点击被触发，警报被显示，但 div 没有显示，如果我点击或如果我在鼠标悬停，会发生什么？
由于这两个功能都在单击时触发，因此会显示警报，然后直接隐藏 div。在第一个函数上使用鼠标悬停触发悬停，隐藏 div 的功能在单击时被激活。那么您希望应用程序做什么？单击图标一次触发警报？然后呢？

【解决方案2】：

ups，问题是同一类“.tooltipflag”导致两个函数同时触发的“click”元素，所以我同时显示和隐藏div，看起来我不会工作，但它完全符合我所说的:-))

所以我从第二个函数中删除了“.tooltipflag”，一切正常:-))

非常感谢！

【讨论】：