远程片段上的引导模式'loaded'事件

我目前正在使用 Twitter Bootstrap 模式组件，我遇到了一个问题，即我在使用 data-remote 属性远程加载的内容中的输入字段上使用 jquery 验证插件。

由于内容是在 jquery 验证跨 dom 运行后加载的，因此不会对新加载的元素进行验证。

我有一个修改引导程序的解决方案.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));
            });

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

只是这里的更新：

引导程序添加了已加载的事件。

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

在模式上捕获"加载.bs.modal"事件

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

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

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

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

我希望这将帮助某人:)

根据这两个问题：

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

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

..截至目前，Bootstrap开发人员正在挖掘他们的脚跟，并拒绝将loaded事件添加到Bootstrap中。

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

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

我有一个相当有趣的问题，就我而言，在本地主机上，事件loaded.bs.modal在事件shown.bs.modal之前触发，因为在本地主机上，从" remote"url（这是本地顺便说一句）获取数据的行为甚至在引导程序完成其转换并触发shown.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();
});

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

然而，在 Bootstrap 4 的模态事件中，剂量没有此事件。我建议使用 shown.bs.modal 事件，因为它在 CSS 渲染后触发

相关内容

最新更新

热门标签：