‘show’事件不会在IE9中使用Rails中的Twitter Bootstrap Modal触发

我有一个涉及几个不同框架/库的问题，尽管主要是Twitter Bootstrap（js）和Rails。

我的应用程序中有一个链接，它响应了一些js：

$(function() { var $modal = $(' @product, :customer => @customer, :booking => @booking ) %>'), $calendar = $modal.find('#calendar'), currentProduct = ;, initBookingCalendar; $('body').append($modal); $modal.modal('show'); /* Booking Calendar */ initBookingCalendar = function(el, productId) { el.fullCalendar() ... }; $($modal).on('shown', function() { if($calendar.is(':empty')) { initBookingCalendar($calendar, ); } }); }); 

问题是由于某些原因，IE9中没有触发“显示”事件！ 我在这里重现了这个问题： http ： //jsfiddle.net/tvkS6/并通过这样做得到它： http ： //jsfiddle.net/tvkS6/9/ 。 问题是我不知道如何在我的代码中实现解决方案，因为我真的不明白问题是什么。

我必须等待initBookingCalendar直到完全显示模式的原因是jQuery FullCalendar插件要求在呈现日历之前元素可见。

任何提示都表示赞赏！

Answer 1

在第一次调用show()方法之前，需要将侦听器的附加移动到该位置。

 $modal.on('shown', function() { if($calendar.is(':empty')) { initBookingCalendar($calendar, <%= @product.id %>); } }); $modal.modal('show'); 

它可能在非IE浏览器中工作的原因是它们支持CSS转换，这使得触发所shown事件的代码是异步的。 由于IE不支持它， show()方法是同步执行的，并且在附加监听器之前触发shown事件。

---

更新

这是一个演示，validation了我的解释为什么你的示例在其他浏览器中工作。 通过设置

 $.support.transitions = false; 

Modal.show()方法将在所有浏览器上同步运行，因此，您的示例现在将在Chrome，FF等中失败。

JSFiddle Demo什么不该做