jQuery对话框没有捕获控件 – IE 9.0

jQuery 前端之家
前端之家收集整理的这篇文章主要介绍了jQuery对话框没有捕获控件 – IE 9.0，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
我的页面上有一个CSS吸盘鱼边菜单.当用户点击页面中的项目时,我弹出一个jQuery UI对话框,并在页面上的div中,我通过jQuery AJAX加载 HTML页面.

在Chrome中,当我点击菜单上的某个项目时,焦点就会从菜单转移到jQuery UI对话框上.

但是在IE和Opera中,即使点击了该项目,焦点仍然在菜单上. jQuery UI对话框无法将焦点从菜单中移开,因此它保持打开状态并阻碍用户的视图.

请看附件图片.

正如你可以看到,我甚至添加了一个文本框,并抓住了焦点,但即使如此,没有变化.

根据要求,here is a link to the website.

示例：当您在IE 9中打开网站,并单击说“技术> MysqL或者技术> MSsql,菜单没有关闭,但它应该是因为我正在打开一个模态对话框,同时加载页面在div后面.但是,如果您打开Chrome的页面,并尝试相同的事情,菜单关闭,因为它应该.
附加相关代码段： – 

  1. /**********************************************
  2. Function to load an html page inside a div
  3. **********************************************/
  4. function loadPageInDiv(containerDiv,pageToLoad,divToLoadIn,loadingDialog,callBackFunction) {
  5.     var parentDiv = $("#" + containerDiv);
  6.     var loadDiv = $("#" + divToLoadIn);
  7.     var dialogBox = $("#" + loadingDialog);
  8.     // Show dialog Box first,then fadeOut,then load,then fadeIn,the close.
  9.     $(dialogBox).data('loadDiv',loadDiv).dialog("open");
  10.     $(loadDiv).load(pageToLoad,function (response,status,xhr) {
  11.         if (response == "error") {
  12.             $(dialogBox).dialog('close');
  13.         }
  14.         else {
  15.             if (callBackFunction != null) {
  16.                 callBackFunction();
  17.             }            
  18.             checkAndDisplay(loadingDialog,divToLoadIn);
  19.         }
  20.     });
  21. }

初始化jquery-ui对话框的功能.

  1. /**************************************
  2. Function to initialize the dialog Box
  3. *****************************************/
  4. function initializePleaseWaitDialog() {
  5.     $("#osmPleaseWait").dialog({
  6.         autoOpen: false,modal: true,dialogClass: 'noTitleDialog',draggable: false,resizable: false
  7.     });
  8. }

切换DIV显示功能

  1. /***************************************
  2. Function to toggle div display
  3. ****************************************/
  4. function checkAndDisplay(dialogToHide,divToShow) {
  5.     $("#" + divToShow).css('display','block');
  6.     $("#" + dialogToHide).dialog("close");
  7. }

更新#3：我尝试过另一种方式,在菜单项的点击事件上,我隐藏了所有的二级div.

  1. $(".osmMenuObject,.mainCatHeaderWithoutChild").click(function () {
  2.             // Currently Selected
  3.             $(".osmMenuObject,.mainCatHeaderWithoutChild").removeClass("osmServiceListSelected");
  4.             $(this).addClass("osmServiceListSelected");
  5.             // Hiding the div**
  6.             $(".secondaryMenuContainer").css('display','none');
  7.             var pageToLoad = $(this).children("input[type='hidden']").val();
  8.             loadPageInDiv("serviceLoadDivContainer","serviceLoadDiv","osmPleaseWait");
  9.             return false;
  10.         });

然后我更新了checkAndDisplay中的代码,以删除我之前添加的display属性,但它仍然不起作用.

  1. function checkAndDisplay(dialogToHide,divToShow) {
  2.     $("#" + dialogToHide).dialog("close");
  3.     $("#" + divToShow).css('display','block');
  4.     $(".secondaryMenuContainer").css('display','');
  5. }

HERE是页面的标记.

  1. <div class="osmListContainerSpecial">
  2.             <div class="osmListHeader" id="osmListHeaderServices">
  3.                 Our Services
  4.             </div>
  5.             <div class="mainCatHeader">
  6.                 Software Development
  7.             </div>
  8.             <%-- Technologies --%>
  9.             <div class="secondCatHeader">
  10.                 Technologies
  11.                 <div class="secondaryMenuContainer" id="softwareDevTech">
  12.                     <div class="secondaryMenu" style="COLOR: #3e3e3e" id="techMenu">
  13.                         <div class="osmMenuObject">
  14.                             .NET/ C#
  15.                             <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techCSharp.html" />
  16.                             <div class="shortMenuDesc">
  17.                                 Our primary area of expertise,with over 5 years of experience.</div>
  18.                         </div>
  19.                         <div class="osmMenuObject">
  20.                             MS-sql
  21.                             <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techMssql.html" />
  22.                             <div class="shortMenuDesc">
  23.                                 We have been working with sql for over 6 years now.</div>
  24.                         </div>
  25.                         <div class="osmMenuObject">
  26.                             MysqL
  27.                             <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techMysqL.html" />
  28.                             <div class="shortMenuDesc">
  29.                                 Open Source Database for faster,hassle-free deployment.</div>
  30.                         </div>
  31.                         <div class="osmMenuObject">
  32.                             Silverlight
  33.                             <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techSilverlight.html" />
  34.                             <div class="shortMenuDesc">
  35.                                 Lorem ipsum dolor sit amet,consectetur adipiscing elit. Quisque sit.</div>
  36.                         </div>
  37.                         <div class="osmMenuObject">
  38.                             MVC
  39.                             <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techMVC.html" />
  40.                             <div class="shortMenuDesc">
  41.                                 Lorem ipsum dolor sit amet,consectetur adipiscing elit. Quisque sit.</div>
  42.                         </div>
  43.                         <div class="osmMenuObject">
  44.                             Azure
  45.                             <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techAzure.html" />
  46.                             <div class="shortMenuDesc">
  47.                                 Lorem ipsum dolor sit amet,consectetur adipiscing elit. Quisque sit.</div>
  48.                         </div>
  49.                     </div>
  50.                 </div>
  51.             </div>
  52.             <%-- Applications --%>
  53.             <div class="secondCatHeader">
  54.                 Applications
  55.                 <div class="secondaryMenuContainer" id="softwareDevApp">
  56.                     <div class="secondaryMenu">
  57.                         <div id="appMsCRM" class="osmMenuObject">
  58.                             Microsoft CRM
  59.                             <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appMsCRM.html" />
  60.                             <div class="shortMenuDesc">
  61.                                 Our primary area of expertise,with over 5 years of experience.</div>
  62.                         </div>
  63.                         <div id="appQb" class="osmMenuObject">
  64.                             QuickBooks
  65.                             <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appQb.html" />
  66.                             <div class="shortMenuDesc">
  67.                                 Lorem ipsum dolor sit amet,consectetur adipiscing elit. Quisque sit.</div>
  68.                         </div>
  69.                         <div id="appGP" class="osmMenuObject">
  70.                             Great Plains
  71.                             <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appGp.html" />
  72.                             <div class="shortMenuDesc">
  73.                                 Lorem ipsum dolor sit amet,consectetur adipiscing elit. Quisque sit.</div>
  74.                         </div>
  75.                         <div id="appSP" class="osmMenuObject">
  76.                             Sharepoint
  77.                             <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appSp.html" />
  78.                             <div class="shortMenuDesc">
  79.                                 Lorem ipsum dolor sit amet,consectetur adipiscing elit. Quisque sit.</div>
  80.                         </div>
  81.                         <div id="appXero" class="osmMenuObject">
  82.                             Xero
  83.                             <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appXero.html" />
  84.                             <div class="shortMenuDesc">
  85.                                 Lorem ipsum dolor sit amet,consectetur adipiscing elit. Quisque sit.</div>
  86.                         </div>
  87.                         <div id="appFB" class="osmMenuObject">
  88.                             Freshbooks
  89.                             <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appFb.html" />
  90.                             <div class="shortMenuDesc">
  91.                                 Lorem ipsum dolor sit amet,consectetur adipiscing elit. Quisque sit.</div>
  92.                         </div>
  93.                         <div id="appSF" class="osmMenuObject">
  94.                             SalesForce
  95.                             <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appSF.html" />
  96.                             <div class="shortMenuDesc">
  97.                                 Lorem ipsum dolor sit amet,consectetur adipiscing elit. Quisque sit.</div>
  98.                         </div>
  99.                         <div id="appNav" class="osmMenuObject">
  100.                             Navision
  101.                             <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appNavision.html" />
  102.                             <div class="shortMenuDesc">
  103.                                 Lorem ipsum dolor sit amet,consectetur adipiscing elit. Quisque sit.</div>
  104.                         </div>
  105.                     </div>
  106.                 </div>
  107.             </div>
  108.             <%-- Independent Software Testing --%>
  109.             <div class="mainCatHeaderWithoutChild">
  110.                 Independent Software Testing
  111.                 <input type="hidden" value="ServicesHTML/Testing.html" />
  112.             </div>
  113.             <%-- Technnical Documentation --%>
  114.             <div class="mainCatHeaderWithoutChild">
  115.                 Technnical Documentation
  116.                 <input type="hidden" value="ServicesHTML/Documentation.html" />
  117.             </div>
  118.             <%-- Case Studies --%>
  119.             <div class="mainCatHeaderWithChild">
  120.                 Case Studies
  121.                 <div class="secondaryMenuContainer">
  122.                     <div class="secondaryMenu" style="COLOR: #3e3e3e">
  123.                         <div class="osmMenuObject">
  124.                             Media - Astral
  125.                             <input type="hidden" value="ServicesHTML/CaseStudies/csAstral.html" />
  126.                             <div class="shortMenuDesc">
  127.                                 Lorem ipsum dolor sit amet,consectetur adipiscing elit. Quisque sit.</div>
  128.                         </div>
  129.                         <div class="osmMenuObject">
  130.                             Waste Disposal - RGMRM
  131.                             <input type="hidden" value="ServicesHTML/CaseStudies/csRGMRM.html" />
  132.                             <div class="shortMenuDesc">
  133.                                 Lorem ipsum dolor sit amet,consectetur adipiscing elit. Quisque sit.</div>
  134.                         </div>
  135.                         <div class="osmMenuObject">
  136.                             Insurance - IAAH
  137.                             <input type="hidden" value="ServicesHTML/CaseStudies/csIAAH.html" />
  138.                             <div class="shortMenuDesc">
  139.                                 Lorem ipsum dolor sit amet,consectetur adipiscing elit. Quisque sit.</div>
  140.                         </div>
  141.                         <div class="osmMenuObject">
  142.                             Housing Providers - TalonPro
  143.                             <input type="hidden" value="ServicesHTML/CaseStudies/csTalonPro.html" />
  144.                             <div class="shortMenuDesc">
  145.                                 Lorem ipsum dolor sit amet,consectetur adipiscing elit. Quisque sit.</div>
  146.                         </div>
  147.                         <div class="osmMenuObject">
  148.                             Education and Training - Met Film
  149.                             <input type="hidden" value="ServicesHTML/CaseStudies/csMetFilm.html" />
  150.                             <div class="shortMenuDesc">
  151.                                 Lorem ipsum dolor sit amet,consectetur adipiscing elit. Quisque sit.</div>
  152.                         </div>
  153.                         <div class="osmMenuObject">
  154.                             Industry - Bates
  155.                             <input type="hidden" value="ServicesHTML/CaseStudies/csBates.html" />
  156.                             <div class="shortMenuDesc">
  157.                                 Lorem ipsum dolor sit amet,consectetur adipiscing elit. Quisque sit.</div>
  158.                         </div>
  159.                         <div class="osmMenuObject">
  160.                             Industry - Atdec
  161.                             <input type="hidden" value="ServicesHTML/CaseStudies/csAtdec.html" />
  162.                             <div class="shortMenuDesc">
  163.                                 Lorem ipsum dolor sit amet,consectetur adipiscing elit. Quisque sit.</div>
  164.                         </div>
  165.                     </div>
  166.                 </div>
  167.             </div>
  168.         </div>

如果您需要任何其他代码或有其他疑问,请通知我.

解决方法

这似乎是一个赛车条件.我不知道“为什么”部分,但这似乎克服了这个问题：

用以下版本替换checkAndDisplay函数：

  1. function checkAndDisplay(dialogToHide,'block');
  2.     setTimeout(function(){
  3.         $("#" + dialogToHide).dialog("close");
  4.     },500);
  5. }

编辑：似乎有一个错误,Internet Explorer不刷新“悬停”状态,除了鼠标移动.这是一个可重复的样品.尝试点击不同浏览器中的绿色区域,不要移动鼠标.
http://jsfiddle.net/5LR8Z/

我没有找到任何解决方案的那个特定的错误.作为解决方法,我会尝试手动关闭菜单(在点击处理程序上设置一个变量,以了解在checkAndDisplay函数上关闭哪个菜单).

猜你在找的jQuery相关文章

《锋利的jQuery》笔记：插件的使用和写法
jQuery插件的种类 1、封装对象方法 这种插件是将对象方法封装起来，用于对通过选择器获取的...
jQuery插件开发入门
扩展jQuery插件和方法的作用是非常强大的，它可以节省大量开发时间。 入门 编写一个jQuery...
jquery.roundabout.js实现3D图片层叠旋转木马切换
最近项目中需要实现3D图片层叠旋转木马切换的效果，于是用到了jquery.roundabout.js。 兼容...
jQuery效果之jQuery实现图片的依次加载图片
css代码： js代码：
jQuery之deferred对象详解
一、什么是deferred对象？ 开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。...
jQuery插件开发进阶
jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发的，有了模式，我们就能...
jQuery 实现邮箱输入自动提示功能：（一）
记得去年做某个项目的时候，用到了邮箱输入自动提示功能，于是网上搜了一下，发现了这个写...
jQuery插件之上传文件ajaxfileupload.js源码与使用
在网页应用中，一般会用到上传文件或者图片什么的到服务器，那么可以用ajaxfileupload.js，...
jQuery效果之封装一个文章图片弹出放大效果
首先先搭写一个基本的格式： 然后用自调用匿名函数包裹你的代码，将系统变量以变量形式传递...
《从零开始学习jQuery》：用jQuery操作元素的属性与样式
元素属性和Dom属性简介 对于下面这样一个标签元素: 我们通常将id,src,alt,class称为属性,也...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作