javascript – JqueryUI工具提示可以防止元素下拉停留在IE 11中

2019-08-24 22:34:29 阅读：118 来源： 互联网

标签：html javascript jquery css jquery-ui

当我在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>

任何帮助赞赏.谢谢.

解决方法:

出于奇怪的原因,设置标题$(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 tracker 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>

标签：html,javascript,jquery,css,jquery-ui
来源： https://codeday.me/bug/20190824/1712845.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – JqueryUI工具提示可以防止元素下拉停留在IE 11中