web-dev-qa-db-ja.com

bootstrap3のモーダルでのコールバック関数

Bootstrap3のjavascriptモーダルでコールバック関数を起動することについて少し混乱しています。通常のjquery.post次のようにできます。

$.post('path', { something: something }, function(data) { 
  console.log(data);
});

しかし、bootstrap 3モーダルでは、スクリプトを介してモーダルを起動し、ウェブサイトの説明をどのように理解するかに基づいてこのように実行します。

$('selector').modal('show', function() { 
  //here comes the problem, I have a button in the modal in the html, my code
  //if the button was clicked inside this modal is..

  $('#myButton').on('click', function() { 
     console.log("this is a try");
  });
});

しかし、ボタンをクリックしても何も起きず、コンソールには何も記録されていないと言うのは悲しいことです。 bootstrap 3のモーダルでコールバック関数を呼び出すにはどうすればよいですか？

jquerycallbacktwitter-bootstrap-3
23
HTTP

Bootstrap 3の場合、イベントは名前空間になりました。したがって、モーダルのshowイベントはshow.bs.modal...

$('#myModal').on('show.bs.modal', function (e) {
    alert('modal show');
});

デモ： http://bootply.com/90952

28
Zim

@ Skelly が正しい場合は、show.bs.modalこのようなイベント：

$('#myModal').on('show.bs.modal', function (e) {
    alert('modal show');
});

公式文書には次のように書かれています：

このイベントは、show instanceメソッドが呼び出されるとすぐに発生します。

このイベントは「すぐに」発生するため、shown.bs.modal代わりに。

このイベントに関するドキュメント：

このイベントは、モーダルがユーザーに表示されると発生します（CSSの移行が完了するまで待機します）。

これは @ Keith yeoh's answerに影響するため、可能であればtimeoutsを避けるにする必要があります。

ソース： Official Bootstrap documentation

14
Meril P

最初の答えに少し追加するのは、コールバックがトリガーされたときにモーダル内のDOMがまだ完全にロードされていないためです。それが役に立てば幸い！

$('#myModal').on('show.bs.modal', function (e) {
    setTimeout(function(){
        // something here
    }, 300);
});
11
Keith Yeoh

「shown.bs.modal」を使用するためには、モーダルがすでにロードされているときに起動する方が良いと思います。 ブートストラップモーダルイベント

$('#myModal').on('shown.bs.modal', function (e) {
    alert('modal is allready shown');
});
8
rborodinov

包む

$(window).on('load', function() {
    ...modal callback here.
});
0
CENT1PEDE