19

私は現在 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を変更せずに外部でこれを機能させる方法はありますか? ページのモーダル オブジェクトにアクセスして、「loaded」イベントをアタッチする方法はありますか? 外部スクリプトまたはページ内でこれを行いたいので、ブートストラップのバージョンについて心配する必要はありません。

4

5 に答える 5

36

ここでの更新のみ：

ブートストラップはロードされたイベントを追加しました。

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
})
于 2014-04-07T21:00:34.863 に答える
18

「loaded.bs.modal」イベントが機能しないため、「shown.bs.modal」イベントを試してみましたが、正常に機能します:

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

このイベントは、モーダルが表示された後にキャプチャされます。

これが誰かを助けることを願っています:)

于 2015-02-24T11:23:09.863 に答える
18

これらの両方の問題によると：

https://github.com/twbs/bootstrap/issues/5169

https://github.com/twbs/bootstrap/pull/6846

..今のところ、Bootstrap の開発者は、Bootstrap にloadedイベントを追加することを拒否して、必死に取り組んでいます。

代わりに、data-remoteマークアップの使用を避け、データを自分でモーダルにロードすることをお勧めします。

$('#myModal').modal(your_options).find('.modal-body').load('request_url', function () {
  // do cool stuff here all day… no need to change bootstrap
}')
于 2013-09-23T14:07:52.637 に答える