javascript - 远程片段上的 Bootstrap 模态 'loaded' 事件

Question

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

因为内容是在 jquery 验证在 dom 上运行之后加载的，所以不会对新加载的元素进行验证。

我有一个修改 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 的情况下让它在外部工作？有没有办法访问页面上的模态对象并将“已加载”事件附加到它？我想在外部脚本或页面内执行此操作，因此我无需担心 Bootstrap 版本。

Answer 1

这里只是更新:

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
})