Javascript 引导模式&x27；已加载'；远程片段上的事件

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

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

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

我有一个修改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？是否有方法访问页面上的模式对象并将“已加载”事件附加到该对象？我希望在外部脚本或页面中执行此操作，因此我不需要担心引导版本。

根据这两个问题：

..到目前为止，引导开发人员正在埋头苦干，拒绝向引导添加

加载的
事件

因此，他们建议您避免使用
数据远程
标记，而是自己将数据加载到模式中：

$('#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”事件

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

“loaded.bs.modal”事件对我不起作用，因此我尝试了“show.bs.modal”事件，效果很好：

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

在显示模式后捕获此事件

我希望这会对某人有所帮助：）
我有一个相当有趣的发现，在本地主机上，加载了事件
。bs.modal
在事件
显示之前启动了。bs.modal
，因为在本地主机上，从“
远程
”url（这是本地btw）获取数据的行为，甚至在引导程序可以完成其转换并触发
show.bs.modal
事件之前，也会立即发生

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

首先触发了所示的
。bs.modal
，然后由于远程url的实际延迟，触发了加载的事件
。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();
});

jQuery（'#myModal'）.on（'show.bs.modal'，function（）{
if（jQuery（this）.find（'.resetFlag'）.length）{
//只有在“loaded.bs.modal”尚未触发时才执行某些操作
}
});
jQuery（'#myModal'）.on（'loaded.bs.modal'，function（e）{
if（jQuery（this）.find（'.resetFlag'）.length）{
//仅当尚未触发“show.bs.modal”时才执行某些操作
}否则{
//仅当已触发“show.bs.modal”时才执行某些操作
}
});
jQuery（'#myModal'）.on（'hidden.bs.modal'，function（）{
jQuery（'#myModal.modal content'）.html（''）；
showModalLoader（）；
});
的模态事件具有加载的
.bs.modal
事件

但是，在的模态事件中没有此事件。我建议使用
show.bs.modal
事件，因为它在CSS呈现后触发
在modal的
show
事件中进行验证是否有问题？@mccannf对于远程内容，在加载新元素之前会触发所显示的事件。你太棒了！感谢您的解决方案！这帮助我解决了这个问题：只是一个简短的说明，这样人们就不会不检查就接受接受答案。Bootstrap已经有一段时间“loaded.bs.modal”事件了-谢谢你阻止了我的头发不再长在头上！请从最后一行中删除“”号。它应该是}）而不是}'）。只有当模式的内容使用远程选项加载时，此事件才起作用，如果内容嵌入到html模式中，则不起作用。添加此选项时，您知道吗？当我们需要在引导远程模式中加载脚本后调用函数时，这种方法不起作用。谢谢。modals首先显示，然后加载远程内容，所以它不起作用。这与问题无关。这个问题涉及ajax加载的内容，“显示”从来不会作为ajax响应的产物触发。对我来说也很有用。我的模态体使用ajax加载，然后显示。也许与这个问题无关，但对我们中的一些人很有帮助：-）