javascript bootstrap,模态对话框,showed.bs.modal 事件不会触发

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/20339958/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 18:16:00  来源:igfitidea点击:

bootstrap, modal dialogs, shown.bs.modal event doesn't fire

javascriptjquerytwitter-bootstrap-3

提问by Tenek

I'm using modal dialog with remote option:

我正在使用带有远程选项的模式对话框:

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

Where:

在哪里:

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

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

另外,我正在侦听我使用 event.target 属性的 show.bs.modal 事件:

$("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 transitionas 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?

所以,我关闭了转换作为一种解决方法,它第一次触发了事件,但是 event.target 是空字符串。第二次 event.target 包含适当的对话框 HTML。这是我的代码或引导程序的问题吗?

采纳答案by Anton

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

我有同样的问题。我可以使用此 StackOverflow 问题的解决方案来修复它:远程片段上的 Bootstrap modal 'loaded' 事件

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

基本上,您必须手动打开模态并自己实现 Ajax 加载。就像是:

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