Question

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

此内容的内部是一个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();
    });

Answer 1

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

以下是不隐藏div的示例：https://jsfiddle.net/y4jfkzte/

Answer 2

ups，问题在于由同一类“ .tooltipflag”引起的同时在两个函数上触发的“ click”元素，因此我同时显示和隐藏div，看起来我无法正常工作，但它确实正是我告诉过的：-））

所以我从第二个功能中删除了“ .tooltipflag”，并且一切正常：-））

非常感谢！

jQuery onmouseover change div与单击相同，将无法正常工作

2 个答案: