bootstrap监听模态框_bootstrap，模态对话框，shown.bs.modal事件不会触发

I'm using modal dialog with remote option:

data-toggle="modal" class="banner-slide-control">Edit

Where:

Also, I'm listening for shown.bs.modal event where I use event.target property:

$("body").on("shown.bs.modal", function (event) {

// do something with event.target

}

Some reason this event is not fired when I open dialog for the first time. And it gets fired for the second time only. I tried to browse bootstrap scripts and found this code (see my comment):

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)

So, I turned off transition as a workaround, It made event be fired for the first time, but, event.target is empty string. For the second time event.target contains appropriate dialog HTML. Is this problem with my code or bootstrap?

解决方案

I had the exact same Problem. I could fix it with the solution to this StackOverflow question: Bootstrap modal 'loaded' event on remote fragment

Basically you have to open the modal manually and implement the Ajax loading yourself. Something like:

$modal.modal({

'show': true

}).load('/Banner/SlideEditModal/1/1', function (e) {

// this is executed when the content has loaded.

});