19

我目前正在使用 Twitter Bootstrap 模态组件，我遇到了一个问题，我在使用 data-remote 属性远程加载的内容中的输入字段上使用 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 片段的调用的“加载”事件。

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

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

我的问题是我必须修改 bootstrap.js 来实现这一点，有没有一种方法可以在不修改 bootstrap.js 的情况下在外部工作？有没有办法访问页面上的模态对象并将“加载”事件附加到它？我想在外部脚本或页面内执行此操作，因此我无需担心引导程序版本。

4

5 回答 5

36

这里只是一个更新：

Bootstrap 添加了加载事件。

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

捕获模态上的“loaded.bs.modal”事件

$('#myModal').on('loaded.bs.modal', function (e) {
  // do cool stuff here all day… no need to change bootstrap
})
于 2014-04-07T21:00:34.863 回答
18

根据这两个问题：

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

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

..截至目前，Bootstrap 开发人员正在全力以赴，拒绝在loadedBootstrap 中添加事件。

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

$('#myModal').modal(your_options).find('.modal-body').load('request_url', function () {
  // do cool stuff here all day… no need to change bootstrap
}')
于 2013-09-23T14:07:52.637 回答
18

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

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

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

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

于 2015-02-24T11:23:09.863 回答
0

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

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

于 2020-12-16T05:57:40.503 回答
0

我有一个相当有趣的问题，在我的例子中，在 localhost 上，事件在事件之前触发，loaded.bs.modal因为在本地主机上，从 " " url（这是本地 btw）获取数据的行为甚至在引导程序之前立即发生可以完成它的转换并触发事件。shown.bs.modalremoteshown.bs.modal

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

首先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();
});
于 2018-11-16T12:14:07.983 回答