Question

我目前正在使用Twitter Bootstrap模式组件，我有一个问题，我使用数据远程属性远程加载的内容中的输入字段使用jquery验证插件。

因为在遍及dom的jquery验证之后加载了内容，所以对于新加载的元素不会进行验证。

我有一个解决方案，我修改bootstrap.js（模态类），见下文。

  var Modal = function (element, options) {
    this.options = options
    this.$element = $(element)
      .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this))
    //this.options.remote && this.$element.find('.modal-body').load(this.options.remote)

    this.options.remote && this.$element.find('.modal-body').load(this.options.remote, $.proxy(function () {
        this.$element.trigger('loaded')
    }, this)) //my additions
  }

我在加载外部html片段的调用中触发'loaded'事件。

我已经连接了这个事件，我在新加载的元素上调用验证。

$('#myModal').on('loaded', function () {
                $.validator.unobtrusive.parse($(this));
            });

我的问题是我必须修改bootstrap.js才能实现这一点，有没有办法让我在外部工作而不修改bootstrap.js？有没有办法访问页面上的模态对象并将'loaded'事件附加到它？我想在外部脚本或页面中执行此操作，因此我不需要担心引导版本。

Answer 1

这里只是更新：

Bootstrap添加了一个已加载的事件。

http://getbootstrap.com/javascript/#modals

捕获＆＃39; loaded.bs.modal＆＃39;模态上的事件

$('#myModal').on('loaded.bs.modal', function (e) {
  // do cool stuff here all day… no need to change bootstrap
})

Answer 2

根据这两个问题：

https://github.com/twbs/bootstrap/issues/5169

https://github.com/twbs/bootstrap/pull/6846

..截至目前，Bootstrap开发人员正在深入研究并拒绝在Bootstrap中添加loaded事件。

因此，他们建议您避免使用data-remote标记并将数据自己加载到模式中：

$('#myModal').modal(your_options).find('.modal-body').load('request_url', function () {
  // do cool stuff here all day… no need to change bootstrap
}')

Answer 3

'loaded.bs.modal'事件对我不起作用，所以我尝试了'shown.bs.modal'事件并且它运行正常：

$('#myModal').on('shown.bs.modal', function () {
   // do cool stuff here...
});

在显示模态后捕获此事件。

我希望这会对某人有所帮助:)。

Answer 4

我有一个有趣的发现，就我而言，在本地主机上，事件loaded.bs.modal在事件shown.bs.modal之前触发，因为在本地主机上，该行为是即使在引导程序完成转换并触发remote事件之前，“ shown.bs.modal” URL（是本地btw ）的数据仍在瞬间发生。

但是在网络服务器上，事件以感知的顺序触发。

首先触发shown.bs.modal，然后由于远程URL的实际延迟，事件loaded.bs.modal被触发。

我想要的是抓住最后一个发生的事件。

因此，为解决此问题，我提出了自己的实现，如下所示。 YMMV，现在这里有很多假设，因此将下面的代码当作一个POC并带有一点儿麻烦，而不是完整的代码。

jQuery('#myModal').on('shown.bs.modal', function () { if (jQuery(this).find('.resetFlag').length) { // Do something ONLY IF "loaded.bs.modal" hasn't yet been triggered } }); jQuery('#myModal').on('loaded.bs.modal', function (e) { if (jQuery(this).find('.resetFlag').length) { // Do something ONLY IF "shown.bs.modal" hasn't yet been triggered } else { // Do something ONLY IF "shown.bs.modal" hasn already been triggered } }); jQuery('#myModal').on('hidden.bs.modal', function () { jQuery('#myModal .modal-content').html('<div class="resetFlag" style="display:none;"></div>'); showModalLoader(); });

Answer 5

Boostrap 3.3的模态事件具有loaded.bs.modal事件。

但是在Bootstrap 4的情态事件中没有此事件。我建议您使用shown.bs.modal事件，因为CSS呈现后会触发该事件

远程片段上的Bootstrap模态“已加载”事件

5 个答案: