JqueryUI工具提示可防止<select>元素下拉列入IE 11

Question

当我在IE 11中打开此HTML并允许编写脚本时，单击下拉列表会使其闪烁并立即消失。 有任何想法吗？

这是一个更大的应用程序，具有样式和其他元素，但这是重现它的最小值。

我留下了一些技巧，我试图抵消这一点 - 在onclick和onmouseover你可以看到我试图删除属性的脚本。 但是，无论什么打破，下拉列表已经损坏了它。 当我删除HTML顶部的脚本以显示工具提示时，甚至会发生这种情况; 它没有出现，但下拉列表仍然被打破。

<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>

任何帮助赞赏。 谢谢。

Answer 1

出于奇怪的原因，设置标题$(this).attr('title', '')或this.title = ''正在关闭下拉列表。

在IE11中尝试以下HTML

使用jQuery .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>

缩小范围后，我也在jQuery bug跟踪器中找到了这个问题http://bugs.jqueryui.com/ticket/8798

解：

既然我们知道原因，您可以避免使用title属性来管理工具提示，而是使用数据说customtooltip并在插件中使用它。

<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'),

在IE 11中尝试下面的内容，让我知道..

 $(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>

JqueryUI工具提示可防止<select>元素下拉列入IE 11

问题描述

1 个解决方案

解决方案1
6 已采纳 2014-11-18 00:58:01

解：

JqueryUI工具提示可防止<select>元素下拉列入IE 11

问题描述

1 个解决方案

解决方案1 6 已采纳 2014-11-18 00:58:01

解：

解决方案1
6 已采纳 2014-11-18 00:58:01