'show' event doesn't fire in IE9 using Twitter Bootstrap Modal in Rails

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!