私は何時間も頭を悩ませてきましたが、ブートストラップモーダルが ajax 機能を使用しているときに .on イベント内から読み込み画面を表示しない理由がわかりません。$('body').modalmanager('loading'); .on イベントの外に置くと機能するので、スクリプトが正しく機能していることがわかります。しかし、プラグインの例のように、on イベント内にある場合は何も得られません。助言がありますか?
以下のコードを使用してクリック イベントをバインドしています。
$.fn.modalmanager.defaults.resize = true;
$.fn.modalmanager.defaults.spinner = '<div class="loading-spinner fade" style="width: 200px; margin-left: -100px;"><img src="http://localhost:2621/assets/img/ajax-modal-loading.gif" align="middle"> <span style="font-weight:300; color: #eee; font-size: 18px; font-family:Open Sans;"> Loading...</div>';
var $modal = $('#add-offense');
$('.add-offense-btn').on('click', function () {
// create the backdrop and wait for next modal to be triggered
// THIS IS NEVER CALLED INSIDE THE .on EVENT
$('body').modalmanager('loading');
var url = "/case/saveoffense/"; // the url to the controller
setTimeout(function () {
$modal.load(url, '', function () {
$modal.modal().on("hidden", function () {
$modal.empty();
});
$modal.modal();
})
}, 1000);
});
また、bootstrap.js に加えて、以下に示す最新の bootstrap-modal ファイルを含めています。
<script src="@Url.Content("~/assets/plugins/bootstrap-modal/js/bootstrap-modal.js")" type="text/javascript" ></script>
<script src="@Url.Content("~/assets/plugins/bootstrap-modal/js/bootstrap-modalmanager.js")" type="text/javascript" ></script>