関数をTwitter Bootstrap Modalにバインドする

私は新しいプロジェクトでTwitter Bootstrap libを使用していて、ページの一部で最新のjsonデータをモーダルクローズで更新して取得したいと考えています。ドキュメンテーションのどこにもこれが見当たらないので、誰かが私に指摘したり、解決策を提案したりできます。

文書化された方法の使用に関する2つの問題

 $('#my-modal').bind('hide', function () {
   // do something ...
 });

モーダルに「非表示」クラスをすでにアタッチしているため、ページのロード時に表示されず、2回ロードされます。

非表示クラスを削除して要素IDをに設定し、上記の関数にdisplay:none追加console.log("THE MODAL CLOSED");しても、閉じると何も起こりません。

ブートストラップ3＆4

$('#myModal').on('hidden.bs.modal', function () {
    // do something…
});

ブートストラップ3：getbootstrap.com/javascript/#modals-events

ブートストラップ4：getbootstrap.com/docs/4.1/components/modal/#events

ブートストラップ2.3.2

$('#myModal').on('hidden', function () {
    // do something…
});

getbootstrap.com/2.3.2/javascript.html#modals→イベントを参照してください

ブートストラップ4

$('#my-modal').on('hidden.bs.modal', function () {
  window.alert('hidden event fired!');
});

実際の例については、このJSFiddleを参照してください。

https://jsfiddle.net/6n7bg2c9/

ここのドキュメントのモーダルイベントセクションを参照してください：

https://getbootstrap.com/docs/4.3/components/modal/#events

Bootstrap 3（編集：Bootstrap 4でも同じ）を開始すると、イベントを起動できるインスタンスが2つあります。

1. モーダル「非表示」イベントが開始したとき

$('#myModal').on('hide.bs.modal', function () { 
    console.log('Fired at start of hide event!');
});  

2. モーダル「非表示」イベントが終了したとき

$('#myModal').on('hidden.bs.modal', function () {
    console.log('Fired when hide event has finished!');
});

参照：http : //getbootstrap.com/javascript/#js-events

「ライブ」の代わりに「オン」イベントを使用する必要がありますが、それをドキュメントオブジェクトに割り当てます。

使用する：

$(document).on('hidden.bs.modal', '#Control_id', function (event) {
// code to run on closing
});

$(document.body).on('hidden.bs.modal', function () {
    $('#myModal').removeData('bs.modal')
});

ブートストラップは、モーダルにフックできるイベントを提供します。たとえば、モーダルがユーザーから非表示にされたときにイベントを発生させたい場合は、次のように hidden.bs.modalイベントを使用できます。

    /* hidden.bs.modal event example */
    $('#myModal').on('hidden.bs.modal', function () {
          window.alert('hidden event fired!');
    })

ここで動作するフィドルを確認してください。モーダルメソッドとイベントの詳細については、こちらのドキュメントをご覧ください。

ブートストラップ4：

$('#myModal').on('hidden.bs.modal', function (e) {
   // call your method
})

hide.bs.modal：このイベントは、インスタンスの非表示メソッドが呼び出されるとすぐに発生します。

hidden.bs.modal：このイベントは、モーダルがユーザーから非表示にされたときに発生します（CSSの移行が完了するまで待機します）。

私はそれをこのようにします：

$('body').on('hidden.bs.modal', '#myModal', function(){ //this call your method });

残りはすでに他の人によって書かれています。また、ドキュメントを読むことをお勧めします：jquery-on method

hide.bs.modalモーダルが閉じたときにトリガーされるなど、ブートストラップイベントに関する多くの回答を見てきました。

これらのイベントには問題があります。モーダル内のポップアップ（ポップオーバー、ツールチップなど）がそのイベントをトリガーします。

モーダルが閉じたときにイベントをキャッチする別の方法があります。

$(document).on('hidden','#modal:not(.in)', function(){} );

ブートストラップは、inモーダルが開いているときにクラスを使用します。イベントがトリガーされたときにhiddenクラスinがまだ定義されているため、イベントを使用することは非常に重要hideです。

IE8はJquery :not()セレクターをサポートしていないため、このソリューションはIE8では機能しません。

私はいくつかと同じ問題を抱えていました

$('#myModal').on('hidden.bs.modal', function () {
// do something… })

これをページの下部に配置する必要があります。上部に配置してもイベントは発生しません。

すべてのモーダル終了で関数を実行したい場合は、このメソッドを使用できます。

$(document).ready(function (){
    $('.modal').each(function (){
        $(this).on('hidden.bs.modal', function () {
            //fires when evey popup close. Ex. resetModal();
        });
    });
});

したがって、毎回モーダルIDを指定する必要はありません。