Подтвердить что ты не робот

Модифицированное загрузочное событие Bootstrap на удаленном фрагменте

В настоящее время я использую модный компонент Twitter Bootstrap, и у меня есть проблема, когда я использую плагин проверки правильности jquery для полей ввода в удаленном приложении, использующем атрибут data-remote.

Поскольку содержимое загружается после того, как проверка 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? Есть ли способ получить доступ к модальному объекту на странице и прикрепить к нему "загруженное" событие? я хотел бы сделать это во внешнем script или внутри страницы, поэтому мне не нужно беспокоиться о версиях начальной загрузки.

4b9b3361

Ответ 1

В соответствии с этими двумя проблемами:

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

Ответ 2

Просто обновите здесь:

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

Ответ 3

Событие 'loaded.bs.modal' не работает для меня, поэтому я попробовал событие 'show.bs.modal', и он отлично работает:

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

Это событие записывается после отображения модальности.

Надеюсь, это поможет кому-то:)