9

我有一个涉及几个不同框架/库的问题，尽管主要的是 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 插件要求元素在呈现日历之前可见。

任何提示表示赞赏！

4

1 回答 1

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 演示什么不该做

于 2012-08-03T20:48:23.597 回答