引导远程片段模式'装'事件 [英] Bootstrap modal 'loaded' event on remote fragment

问题描述

我目前使用Twitter的引导模式的组成部分，我有我的地方在内容使用jQuery验证插件输入字段的问题，我用数据远程属性远程加载。

I'm currently using Twitter Bootstrap modal component and i have an issue where I use jquery validation plugin on input fields in the content I load remotely using the data-remote attribute.

由于内容是jQuery验证已在整个DOM运行加载后，确认不会出现在新加载的元素。

Because the content is loaded after jquery validation has run across the dom, validation doesn't occur for the newly loaded elements.

我有一个解决方案，我修改bootstrap.js（模态类），见下图。

I have a solution where I modify bootstrap.js (the modal class), see below.

  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片段呼叫。

I trigger a 'loaded' event to the call that loads the external html fragment.

我已经有这个活动连接起来，我呼吁新加载的内容进行验证。

I already have this event wired up and i call the validation on the newly loaded elements.

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

我的问题是，我不得不修改bootstrap.js要实现这一点，是有办法，我可以有这个不修改bootstrap.js外部工作吗？是否有访问一个页面上的模态对象和'装'事件附加到它的方法吗？我想这样做在外部脚本或页面内，所以我不用担心引导版本。

My issue is that I had to modify bootstrap.js to achieve this, is there a way I can have this working externally without modifying bootstrap.js? Is there a way to access the modal object on a page and attach the 'loaded' event to it? i'd like to do this in an external script or within a page so i don't need to worry about bootstrap versions.

推荐答案

据这两个问题：

<一个href=\"https://github.com/twbs/bootstrap/issues/5169\">https://github.com/twbs/bootstrap/issues/5169

<一个href=\"https://github.com/twbs/bootstrap/pull/6846\">https://github.com/twbs/bootstrap/pull/6846

..截至目前引导开发商都挖自己的高跟鞋，拒绝一个加载事件添加到引导。

..as of now the Bootstrap developers are digging their heels in and refusing to add a loaded event into Bootstrap.

所以，相反，他们建议您避免使用数据远程标记和自己的数据装入模态：

So instead they recommend you avoid using the data-remote markup and load the data yourself into the modal:

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

这篇关于引导远程片段模式'装'事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！