'show'事件不会在IE9中使用Twitter Bootstrap Modal in Rails触发 [英] 'show' event doesn't fire in IE9 using Twitter Bootstrap Modal in Rails

问题描述

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

我在我的应用程序中有一个链接（$）
$ b

  $（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'）; 
 
 / *预订日历* / 
 initBookingCalendar = function（el，productId）{
 
 el.fullCalendar（）
 
 ... 
 
}; 
 
 $（$ modal）.on（'shown'，function（）{
 if（$ calendar.is（'：empty'））{
 initBookingCalendar（$ calendar，<％= @p roduct.id％>）; 
} 
}）; 
}）; 
  

问题是由于某些原因，'shown'事件在IE9中不会触发！？我在这里重现了这个问题： http://jsfiddle.net/tvkS6/ ，并通过这样做得到它的工作： http://jsfiddle.net/tvkS6/9/ 。问题是我不知道如何在我的代码中实现解决方案，因为我不明白问题所在。

我必须等待initBookingCalendar直到完全显示模式为止，jQuery FullCalendar Plugin要求元素在呈现日历之前可见。

赞赏任何提示！

$ b $

  $ modal.on（'shown'，function（）{
 if（$ calendar.is（' ：
 initBookingCalendar（$ calendar，<％= @ product.id％>）; 
} 
}）; 
 
 $ modal.modal（'show'）; 
  

它可能在非IE浏览器中工作的原因是它们支持CSS转换，它使触发显示事件的代码是异步的。由于IE不支持它，所以 show（）方法同步执行，触发 事件触发事件在您附加侦听器之前。

---

更新

演示，验证我的解释为什么您的示例在其他浏览器中工作。通过设置

  $。support.transitions = false; 
  

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

JSFiddle演示不要做什么

I have an issue involving a couple of different frameworks/libs although the main ones being Twitter Bootstrap(js) and Rails.

I have a link in my app that responds with some 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 %>);
        }
    });
});

The problem is that the 'shown' event doesn't fire in IE9 for some reason!? I reproduced the problem here: http://jsfiddle.net/tvkS6/ and got it working by doing it like this: http://jsfiddle.net/tvkS6/9/ . Problem is I don't know how to implement the solution in my code since I don't really understand what the problem is.

The reason I have to wait with initBookingCalendar until the modal is entirely shown is that jQuery FullCalendar Plugin requires the element to be visible before rendering the calendar.

Any hints are appreciated!

解决方案

You need to move your attaching of the listener to before your first call of the show() method.

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

$modal.modal('show');

The reason why it might be working in non-IE browsers is because they support CSS transitions, which makes it so that the code that triggers the shown event is asynchronous. Since IE doesn't support it, the show() method is carried out synchronously, and the shown event is triggered before you attach the listener.

---

Update

Here's a demo that verifies my explanation as to why your example works in other browsers. By setting

$.support.transitions = false;

The Modal.show() method will run synchronously on all browsers, and thus, your example will now fail in Chrome, FF, etc..

JSFiddle Demo of what not to do

这篇关于'show'事件不会在IE9中使用Twitter Bootstrap Modal in Rails触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！