IE讨厌我的模态窗口事件 [英] IE hates my modal window events

问题描述

我正在建立一个网站，并在我的项目中使用Twitter Bootstrap modal.js.和往常一样，IE会引起一些麻烦.

I am building a website and am using Twitter Bootstrap modal.js as part of my project. And as usual, IE is causing some trouble.

我有几个按钮，当单击每个按钮时，它们会通过ajax获取不同的表单，并用该表单填充模态，并将其调出.由于它们是动态获取的，因此在获取模式后，我需要使用其他脚本(例如jQuery UI datepicker)来更新某些字段.在进行ajax调用后，立即无法使用，因此我需要使用模式事件.

I have a few buttons, that when clicked each fetches a different form through ajax, fills the modal with the form, and brings it up. Since they are being fetched dynamically I need to update some of the fields with additional scripts (jQuery UI datepicker for example) after the modal is being fetched. Immediately after the ajax call does not work so I need to use the modal events.

这适用于chrome:

This works on chrome:

$('#myModal').modal().on('shown', function() {
    $('#id_date').datepicker();
});

但是，IE做一些奇怪的事情.为了使其正常工作，我必须将侦听器绑定到"show"事件("shown"不起作用)和文档上，而不是模式上.

However, IE does something weird. For it to work I had to bind the listener to the 'show' event ('shown' doesn't work) and to the document instead of the modal.

在文档内部.就绪:

$(document).on('show', function() {
    $('#id_date').datepicker();
});

点击按钮后:

$('#myModal').modal('show'); 

但是这里有一个关键-除非除非我在.datepicker()上方添加alert('hello');，否则这都不起作用.为什么警报会更改任何内容?我不知道，但是它还会堆积起来-每次您单击一个按钮时，都会收到更多警报​​，例如，第一次警报，第二次两次警报，等等.

But here's the kicker - this doesn't work either unless I add an alert('hello'); above the .datepicker(). Why does alert change anything? I don't know, but then it also stacks up - every time you click on one of the buttons you get more alerts, i.e. the first time one alert, the second time two alerts and so on.

我正在使用引导程序2.2和IE8(标准模式，还有一个用于确保页面呈现为IE8而不是较旧版本的meta).我不知道这里出了什么问题，请帮忙！

I am using bootstrap 2.2 and IE8 (standards mode, there's also a meta to make sure the page is rendered as IE8 and not an older version). I have no idea what's the problem here, please help!

更新

所以我把范围缩小了一点.这与显示"或显示"事件或其绑定无关.这很奇怪.这就是我最终要做的:

So I narrowed it down a little. This isn't anything to do with the 'shown' or 'show' events or what it is binded for. It's a lot weirder. This is what I ended up doing:

$('#myModal').on('shown', function() {
     if (navigator.appName == 'Microsoft Internet Explorer') {
         alert('Hey! you should really use Chrome!');
     }
     $('#id_date').datepicker();
     $('#id_tags').chosen(); 
});


$('#button1').on('click', function() {
     $('#myModal').modal();
});

如果没有警报消息，则IE不会运行datepicker并选择紧随其后的代码. 为什么简单的警报会产生这种影响?

Without the alert message, IE doesn't run the datepicker and chosen code that comes immediately afterward. why would a simple alert have such an impact?

推荐答案

编辑:重新考虑后，这似乎是一种比赛条件

After reconsideration this seems to be a race condition

对于为什么发生这种情况，我没有真正的答案，除了IE使用不同的jQuery版本和html5属性之外，IE令人痛苦..

I don't have a real answer on why this is happening, other than IE being a pain with different jQuery versions and html5 attributes..

但是，我做记得几个月前有一个类似的问题，如果我没记错的话，将以下行添加到您的html head部分应该会很有帮助.

However, I do remember having had a similar issue a few months ago, if I'm not mistaken, adding the following line to your html head section should help a lot.

<!--[if lt IE 9]>
    <script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

这篇关于IE讨厌我的模态窗口事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！