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

Question

我目前正在使用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片段的调用中触发'loaded'事件.

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

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

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

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

Answer 2

根据这两个问题:

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

Answer 3

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

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

显示模态后捕获此事件.

我希望这会帮助别人:)