JqueryUI工具提示可防止< select>元素下拉在IE 11中停留 [英] JqueryUI tooltip prevents <select> element dropdown from staying down in IE 11
问题描述
当我在IE 11中打开这个HTML并允许编写脚本时，单击下拉菜单会使其闪烁起来并立即消失。有任何想法吗？
这是一个更大的应用程序，包含样式和其他元素，但这是重现它的最低限度。
我已经尝试了一些技巧来解决这个问题 - 在onclick和onmouseover中，您可以看到我尝试删除属性的脚本。然而，无论什么时候下拉菜单已经损坏了它。它甚至发生在我删除HTML顶部的脚本以使工具提示出现时;它不会出现，但下拉菜单仍然被打破。
< html>
< script type =text / javascriptsrc =http://code.jquery.com/jquery-1.11.1.js>< / script>
< script type =text / javascriptsrc =http://code.jquery.com/ui/1.11.2/jquery-ui.js>< / script>
< script type =text / javascript>
$（[data-tooltip-open = true]）。 $（this）.data（'content'），
position：{
my：center bottom-20，
at：center top，
using：function （position，feedback）{
$（this）.css（position）;
$（< div>）
.addClass（arrow）
.addClass （feedback.vertical）
.addClass（feedback.horizontal）
.appendTo（this）;
}
}
}）。tooltip（open）;
}）;
< / script>< body>
< form>
任何帮助表示赞赏。谢谢。
奇怪的原因是，设置标题 $（this）.attr（'title' ，''）或 this.title =''正在关闭下拉菜单。
<使用jQuery
.attr ，在 IE11 p>
< script src =https://ajax.googleapis.com/ajax/ libs / jquery / 1.11.1 / jquery.min.js>< / script>< select name =testtitle =需要从此列表中选择一个。 onclick =$（this）.attr（'title'，''）> < option value =>< / option> < option value =>< / option> < option value =1>选项1< / option> < option value =2>选项2< / option> < option value =3> Option 3< / option>< / select>
使用 this.title ，
< select name =testtitle =需要从此列表中进行选择。 onclick =this.title =（this.title ==''）？'Test'：'';> < option value =>< / option> < option value =>< / option> < option value =1>选项1< / option> < option value =2>选项2< / option> < option value =3> Option 3< / option>< / select>
在缩小范围后，我还在jQuery bug跟踪器 http：//bugs.jqueryui。 com / ticket / 8798
解决方案：
现在我们知道原因了，您可以避免使用title属性来管理您的工具提示，而是使用数据 然后在插件选项中： 在IE 11中尝试下面的内容，并让我知道.. b When I open this HTML in IE 11 and allow scripting, a click on the dropdown causes it to flash up and immediately disappear. Any ideas? This is from a much larger app, with styles and other elements, but here is the minimum to reproduce it. I've left in a few tricks I tried to counteract this - in the onclick and onmouseover you can see script I have that tries to remove the attributes. However, whatever breaks the dropdown has already corrupted it. It even occurs when I remove the script at the top of the HTML to make the tooltip appear; it doesn't appear, but the dropdown is still broken. Any help appreciated. thanks. For weird reasons, setting the title Try below HTML in IE11 Code using jQuery
Code using
After narrowing it down, I also found this issue in jQuery bug tracker http://bugs.jqueryui.com/ticket/8798 Now that we know the reason, you can avoid using title attribute to manage your tooltip, instead use a data say and then in the plugin options: Try below in IE 11 and let me know..
这篇关于JqueryUI工具提示可防止< select>元素下拉在IE 11中停留的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
<$ p
data-content =true
data-customtooltip =$ p $ < select name =test
data-tooltip-open =true从这个列表中选择是必需的。>
<$ （'data-tooltip-open = true]）。data（'customtooltip'），
tooltip（{items：[data-content = true]，content：$（[data-tooltip-open = true]） ）.data（'customtooltip'），position：{my：center bottom-20，at：center top，using：function（position，feedback）{$（this）.css（position）; $（ < div>）.addClass（arrow）.addClass（feedback.vertical）.addClass（feedback.horizontal）.appendTo（this）;}}}）。tooltip（open）;}）; < script src =https ：//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< / script>< script type =text / javascriptsrc =http：// code .jquery.com / ui / 1.11.2 / jquery-ui.js>< / script>< select name =testdata-tooltip-open =truedata-content =truedata- customtooltip =需要从此列表中选择。> < option value =>< / option> < option value =>< / option> < option value =1>选项1< / option> < option value =2>选项2< / option> < option value =3> Option 3< / option>< / select> <html>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("[data-tooltip-open=true]").tooltip({
items: "[data-content=true]", content: $(this).data('content'),
position: {
my: "center bottom-20",
at: "center top",
using: function (position, feedback) {
$(this).css(position);
$("<div>")
.addClass("arrow")
.addClass(feedback.vertical)
.addClass(feedback.horizontal)
.appendTo(this);
}
}
}).tooltip("open");
});
</script><body>
<form>
<select name="test"
title="A selection from this list is required."
data-tooltip-open="true" data-content="true"
onclick="$(this).attr('data-tooltip-open','false');$(this).attr('title','');$(this).attr('data-content','false');"
onmouseover="$(this).attr('data-tooltip-open','false');$(this).attr('title','');$(this).attr('data-content','false');">
<option value=""></option>
<option value=" "> </option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</form>
</body>
</html>
$(this).attr('title', '') or this.title = '' is closing the drop down..attr,<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="test" title="A selection from this list is required." onclick="$(this).attr('title', '')">
<option value=""></option>
<option value=" "></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>this.title,<select name="test" title="A selection from this list is required." onclick="this.title = (this.title == '')?'Test':'';">
<option value=""></option>
<option value=" "></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>Solution:
customtooltip and use it in the plugin.<select name="test"
data-tooltip-open="true"
data-content="true"
data-customtooltip="A selection from this list is required.">
content: $("[data-tooltip-open=true]").data('customtooltip'),
$(function() {
$("[data-tooltip-open=true]").tooltip({
items: "[data-content=true]",
content: $("[data-tooltip-open=true]").data('customtooltip'),
position: {
my: "center bottom-20",
at: "center top",
using: function(position, feedback) {
$(this).css(position);
$("<div>")
.addClass("arrow")
.addClass(feedback.vertical)
.addClass(feedback.horizontal)
.appendTo(this);
}
}
}).tooltip("open");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<select name="test" data-tooltip-open="true" data-content="true" data-customtooltip="A selection from this list is required.">
<option value=""></option>
<option value=" "></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
登录 关闭
