Бутстрап, модальные диалоги, show.bs.modal событие не срабатывает

Я использую модальное диалоговое окно с удаленным вариантом:

<a target="profile-banner" data-target="#edit-slide-dlg" href="/Banner/SlideEditModal/1/1"
data-toggle="modal" class="banner-slide-control">Edit</a>

Где:

<div id="edit-slide-dlg" class="modal fade" tabindex="-1"></div>

Кроме того, я слушаю event.bs.modal, где я использую свойство event.target:

$("body").on("shown.bs.modal", function (event) {
  // do something with event.target 
}

По этой причине это событие не запускается при первом открытии диалогового окна. И его увольняют во второй раз. Я попытался просмотреть скрипты bootstrap и нашел этот код (см. Мой комментарий):

var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })
transition ?
that.$element.find('.modal-dialog') // wait for modal to slide in
   .one($.support.transition.end, function () {
      that.$element.focus().trigger(e) //THIS LINE NEVER EXECUTED AT FIRST DIALOG OPENING
   })
   .emulateTransitionEnd(300) :
that.$element.focus().trigger(e)

Итак, я отключил переход в качестве обходного пути. Это событие было запущено в первый раз, но event.target - пустая строка. Во второй раз event.target содержит соответствующий диалог HTML. Эта проблема связана с моим кодом или начальной загрузкой?

Ответы

Ответ 1

У меня была та же самая проблема. Я мог бы исправить это с помощью решения этого вопроса StackOverflow: Загрузочное модальное загруженное событие на удаленном фрагменте

В основном вам нужно вручную открыть модальную версию и выполнить загрузку Ajax самостоятельно. Что-то вроде:

$modal.modal({
    'show': true
}).load('/Banner/SlideEditModal/1/1', function (e) {
    // this is executed when the content has loaded.
});