在引导模式打开时调用函数答案

【问题标题】：Calling a function on Bootstrap modal open在引导模式打开时调用函数
【发布时间】：2013-07-01 22:49:46
【问题描述】：

我曾经使用 JQuery UI 的对话框，它有 open 选项，您可以在其中指定一些 Javascript 代码在对话框打开后执行。我会使用该选项使用我拥有的功能选择对话框中的文本。

现在我想使用引导程序的模式来做到这一点。下面是 HTML 代码：

<div id="code" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <pre>
print 'Hello World'

至于打开模态的按钮：

 <a href="#code" data-toggle="modal" class="btn code-dialog">Display code</a>

我尝试使用按钮的 onclick 侦听器，但是在模态出现之前显示了警报消息：

$( ".code-dialog" ).click(function(){
    alert("I want this to appear after the modal has opened!");
});

【问题讨论】：

shown.bs.modal 事件在 HTML 文档至少包含 <div class="modal fade"><div class="modal-dialog"></div></div> 结构时发生。
复制stackoverflow.com/questions/12190119/bootstrap-modal-show-event
欢迎评论@Chemical Programmer，它应该与答案一起出现

标签： javascript jquery jquery-ui twitter-bootstrap modal-dialog

【解决方案1】：

您可以根据需要使用shown event/show 事件：

$( "#code" ).on('shown', function(){
    alert("I want this to appear after the modal has opened!");
});

演示：Plunker

Bootstrap 3.0 更新

对于 Bootstrap 3.0，您仍然可以使用显示的事件，但您可以像这样使用它：

$('#code').on('shown.bs.modal', function (e) {
  // do something...
})

See the Bootstrap 3.0 docs here 在“事件”下。

【讨论】：

在 bootstrap 3.0 中使用 $("#code").on("shown.bs.modal", function(e) {})。
确保考虑到化学程序员所说的需要
结构至少要调用此代码
#code 指的是 jQuery 选择器，它是 jQuery 的基本成分之一：w3schools.com/jquery/jquery_selectors.asp
@Xatenev show 是活动的开始，shown 是活动的结束。这在 Bootstrap 3 和 4 中是一致的
至少显示的.bs.modal 在模态显示之前实际执行。就我而言，这不是问题，但可能很高兴知道。

【解决方案2】：

行不通.. 改用$(window)

展示

$(window).on('shown.bs.modal', function() { 
    $('#code').modal('show');
    alert('shown');
});

隐藏

$(window).on('hidden.bs.modal', function() { 
    $('#code').modal('hide');
    alert('hidden');
});

【讨论】：

$( "#modal" ).on('shown', function(){ alert("我希望它在模式打开后出现！");} 不适合我，但$(window) 工作了！！谢谢@viper_tkd
我需要绑定到打开/关闭的 ANY 模式，而不是通过特定的选择器。在那种情况下，这个答案对我很有效。
这在模式完全加载到 GUI 之前有效。我想在模态加载后从我的模态中获取数据 - 此方法为所有内容返回“未定义”，因为模态 GUI 尚不存在，因此字段和其他所有内容尚不可查询。（不可见）
这对我有用，但我在处理程序中添加了一个检查以针对一个特定模式：if( $('#code').is( e.relatedTarget ) ) { ... }，因为我在页面上有多个。
感谢您提供正确的事件名称，但无需替换 $(window) 的元素 ID。在 jquery 3.4 中使用 bs4。

【解决方案3】：

您可以使用show 而不是shown 使函数在模态打开之前加载，而不是在模态打开之后加载。

$('#code').on('show.bs.modal', function (e) {
  // do something...
})

【讨论】：

【解决方案4】：

引导模式公开事件。像这样监听shown 事件

$('#my-modal').on('shown', function(){
  // code here
});

【讨论】：

【解决方案5】：

如果有人仍然有问题，那么使用 (loaded.bs.modal) 对我来说唯一可以完美地工作：

 $('#editModal').on('loaded.bs.modal', function () {
       console.log('edit modal loaded');

       $('.datepicker').datepicker({
            dateFormat: 'yy-mm-dd',
            clearBtn: true,
            rtl: false,
            todayHighlight: true,
            toggleActive: true,
            changeYear: true,
            changeMonth: true
        });
});

【讨论】：