引导模式在 GUI 中完全加载后触发事件答案

【问题标题】：Trigger event after bootstrap modal is full loaded in GUI引导模式在 GUI 中完全加载后触发事件
【发布时间】：2018-01-24 15:14:13
【问题描述】：

我正在打开引导模式：

$('#myModal').modal({ remote: '/AccountsContact/ModalAssignCustomer?iACCO_KEY=' + iACCO_KEY });

我的问题是我需要从模态中读取一些值。我想这样做，当模式完成加载并显示在 GUI 中时。（在 modal 显示在 GUI 之前，modal 里面的控件还没有生成）。

我知道这个活动：

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

但这里的问题是在 GUI 上加载模式之前触发事件 - 因此尚未生成模式中的所有字段，我无法从中读取。

有没有办法在 modal 完全加载到 GUI 中并且 modal 中的所有控件可见后触发事件？

【问题讨论】：

我认为出于您的目的，您需要依赖loaded.bs.modal，它在远程数据加载后触发。但我应该注意； remote 在 3.3.0 中贬值并在 v4 中删除。你确定你的项目可以依赖它吗？
一个可以在这里有所帮助的小解决方法：打开模式时 --> 附加一个隐藏的输入字段、div 或其他任何不存在的类。（例如<input class="tmp hidden" />）。然后检查 while($('.tmp').length < 1) 是否创建了元素。由于 append 它应该作为最后一个元素添加到 DOM --> 因此当具有此类的元素存在时，模式应该被完全加载
@RobertC - loaded.bs.modal 解决了我的问题。我想当我们更新引导版本时这会是一个问题，但现在，它已经很好了。 V4 中使用什么代替了loaded.bs.modal？请发表您的评论作为答案，以便我将其标记为解决方案。

标签： jquery twitter-bootstrap bootstrap-modal

【解决方案1】：

您要查找的事件是loaded.bs.modal，它在remote 数据完全加载后触发。

如我之前的评论中所述，remote 在 3.3.0 中已被贬值，并在 4.x 版中被完全删除。您可以使用一些 jQuery 非常简单地复制该功能，我鼓励您在 SO 上探索无数的解决方案。我的个人偏好类似于以下代码：

$('body').on('click', '[data-toggle="modal"]', function(){
  $($(this).data("target") + ' .modal-dialog').removeClass('modal-lg').removeClass('modal-sm').addClass('modal-' + $(this).data("size"));
  $($(this).data("target") + ' .modal-content').load($(this).attr("href"));
});

在上面的示例中，模式触发器绑定到body，因此您可以通过在 DOM 外部生成的元素访问它。您仍然可以使用 data-toggle 并指定远程 URL 就像定义 href 属性一样简单，尽管这确实限制了您将 <a> 作为触发器（尽管它可以很容易地修改）。

上述代码所做的第一件事是删除模式上的所有大小调整类并清除任何预先存在的模式内容，因为它依赖于单个模式对话框来填充。

我还想通过data-size 指定应该激活哪个大小的模态框，所以上面的代码也反映了这一点。再说一次……这个选项中有很多个人偏好。

【讨论】：

【解决方案2】：

请看下面的代码，可能对你有帮助。

$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myModal").modal("show");
    });
        $("#myModal").on('shown.bs.modal', function () {
            alert('The modal is fully shown.');
            $(this).find('p').text("This is changed text after alert");
    });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<div class="container">
  <h2>Modal Events - shown.bs.modal</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>The <strong>shown.bs.modal</strong> event occurs when the modal is fully shown.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div> 
</div>

【讨论】：