9

主なものはTwitterBootstrap（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プラグインでは、カレンダーをレンダリングする前に要素が表示されている必要があるためです。

ヒントは大歓迎です！

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 に答える