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

时间:2012-08-03 18:58:42

标签: jquery ruby-on-rails javascript-events twitter-bootstrap fullcalendar

我有一个涉及几个不同框架/库的问题,尽管主要是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 %>);
        }
    });
});

问题是'显示'事件在某些原因不会在IE9中触发!?我在这里重现了这个问题:http://jsfiddle.net/tvkS6/并通过这样做来实现它:http://jsfiddle.net/tvkS6/9/。问题是我不知道如何在我的代码中实现解决方案,因为我真的不明白问题是什么。

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

任何提示都表示赞赏!

1 个答案:

答案 0 :(得分:20)

在第一次调用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什么不该做