Question

每次单击启动我的Bootstrap模式对话框时，都会按预期显示，问题是，“显示”事件并不总是触发。

一旦显示了模态，就需要运行javascript函数以在其中一个模态DIV中渲染地图，但是要做到这一点，必须按顺序完全渲染模态（及其HTML） Javascript可以将元素插入DOM。
为确保已完全渲染模式，使用了 bs.modal.shown 事件。此事件仅在模态完全构建时才触发，因此该事件用于调用加载地图的函数。

很明显，此事件并非总是触发，因为有时在启动模式时，地图不会在模式中渲染。将日志放在控制台上的bs.modal.shown事件表明，绝对不是触发事件，也不是调用呈现地图的函数失败。

使用Chrome DevTools，当显示的事件不触发时，不会显示任何错误或警告。

有趣的是，调试时此事件在我的开发机上触发了95％的时间，但是在部署到我们的IIS Web服务器测试环境中时仅触发了大约50％的时间。

我的应用程序是ASP.Net MVC SPA，因此我的模式HTML部分在布局页面上定义：

<div class="modal fade" id="modal-container" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content" id="modalDiv">
        </div>
    </div>
</div>

然后定义了一个局部视图，该视图被插入到模态中：

<div class="modal-body padding-sm">
@using (Html.BeginForm("PV_flowModelDialog", "Home", FormMethod.Post))
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">

然后在模态下的Java语言中

$('#modal-container').on('shown.bs.modal', function () {
      console.log("Modal container shown.")
      <....function calls here...>
})

然后，我使用“隐藏”事件处理程序来确认记录该模式已被隐藏（除了该模式已被明显隐藏的事实）。此事件持续触发：

$('#modal-container').one('hidden.bs.modal', function () {
    console.log("hidden.bs.modal event.")
})

问题是，是什么导致显示的事件仅间歇性触发？对于可能导致此事件或如何进行进一步调查或解决方法以确保每次触发此事件（或类似事件）的任何想法，将不胜感激。

谢谢！

Answer 1

确保模式已隐藏以启动：

<div class="modal fade" id="modal-containerl" tabindex="-1" role="dialog"  aria-hidden="true">

Answer 2

好的，所以我进行了一些更改，这些更改似乎已经解决了这个问题：

1）可能是我的原始文章的主要遗漏是，在我的“显示”事件处理程序的末尾，我有以下行：$（this）.off（'shown.bs.modal'）;因此，在上下文中：

$('#modal-container').on('shown.bs.modal', function () {
      console.log("Modal container shown.")
      <....function calls here...>

      $(this).off('shown.bs.modal');
})

2）我还发现，虽然Show和Shown处理程序位于我的Partial View（已插入BS模态对话框中）内，但它们并不总是触发。我将它们从“部分视图”移到了我的MVC Layout.cshtml中。为此，事件现在每次都会成功触发。因此，现在Layout.cshtml的这一部分如下：

<div class="modal fade" id="modal-container" tabindex="-1" role="dialog" aria- hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content" id="modalDiv">
        </div>
    </div>
</div>

<script>
    $('#modal-container').on('show.bs.modal', function () {
        console.log('show.bs.modal');
    });

    var mapLoadCount = 0;

    $(document).on('shown.bs.modal', function () {
        console.log('shown.bs.modal');

        defineMapContent();
        loadmap();
        addInteractions();
    });
</script>

有时，第一次显示模态对话框时，地图不会加载到模态的div中。但是，show和show事件正在触发（可以在控制台日志中看到）。如果这种情况仍然存在，我将查看是否在事件触发与被调用事件中的函数之间添加一个短暂的延迟来解决此问题。

Answer 3

使用局部视图时，我遇到了同样的问题。我通过单击按钮来加载数据和模态。但是它只会发射一次。第一次尝试后，重新加载模态/数据从未成功。 get函数位于父级上，而click事件位于子级上。我通过将按钮单击事件更改为主体单击事件来解决它，并使用jQuery数据属性存储了URL。这是一个示例：

                 $('body').on('click', '.modal-edit', function (e) {
                    $.get($(this).data("target"), { "_": $.now() }, function (data) {

                    $('<div id="modal-container-edit" class="modal fade">' +
                        '<div class="modal-content" id= "modalbodyEdit" >' +
                        data + '</div></div>').modal();
                });
            });

我的按钮：

 <button type="button" class="btn btn-sm modal-edit" data- 
     target="@Url.Action("Edit", "Bin", new { Id = m.id })">Edit</button>

Answer 4

为我解决此问题的原因是从模式中删除了“ fade”类。

<div class="modal" id="modal-container" tabindex="-1" role="dialog" aria-hidden="true">

无论出于何种原因，在MVC局部视图中，这似乎都会干扰“显示”事件的持续触发。

如果您仍然想要动画，则使用以下类似的方法覆盖默认的“ fade”类对我也适用。

.modal.fade .modal-dialog {
    -webkit-transform: scale(0.1);
    -moz-transform: scale(0.1);
    -ms-transform: scale(0.1);
    transform: scale(0.1);
    top: 300px;
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.modal.fade.show .modal-dialog {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transform: translate3d(0, -300px, 0);
    transform: translate3d(0, -300px, 0);
    opacity: 1;
}

Bootstrap 3.3.7模态“显示”事件间歇触发

4 个答案: