我遇到了涉及几个不同框架/库的问题,尽管主要是 Twitter Bootstrap(js) 和 Rails。
我的应用程序中有一个链接,它用一些 js 进行响应:
$(function() {
var $modal = $('<%= escape_javascript( render 'front_end/bookings/modal', :product => @product, :customer => @customer, :booking => @booking ) %>'),
$calendar = $modal.find('#calendar'),
currentProduct = <%= raw(@product.to_json) %>;,
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, <%= @product.id %>);
}
});
});
问题是“shown”事件由于某种原因在 IE9 中没有触发!?我在这里重现了这个问题:http://jsfiddle.net/tvkS6/并通过这样做让它工作:http://jsfiddle.net/tvkS6/9/ 。问题是我不知道如何在我的代码中实现该解决方案,因为我真的不明白问题是什么。
我必须等待 initBookingCalendar 直到模式完全显示的原因是 jQuery FullCalendar 插件要求元素在渲染日历之前可见。
如有任何提示,我们将不胜感激!
最佳答案
您需要将监听器的附加移动到第一次调用 show()
方法之前。
$modal.on('shown', function() {
if($calendar.is(':empty')) {
initBookingCalendar($calendar, <%= @product.id %>);
}
});
$modal.modal('show');
它之所以可以在非 IE 浏览器中工作,是因为它们支持 CSS 转换,这使得触发 shown
事件的代码是异步的。由于 IE 不支持,因此 show()
方法是同步执行的,并且在附加监听器之前会触发 shown
事件。
更新
这是一个演示,它验证了我对为什么您的示例可以在其他浏览器中运行的解释。通过设置
$.support.transitions = false;
Modal.show()
方法将在所有浏览器上同步运行,因此,您的示例现在将在 Chrome、FF 等中失败。
JSFiddle Demo不该做什么
关于jquery - 在 Rails 中使用 Twitter Bootstrap Modal 时,“show”事件不会在 IE9 中触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11801711/