web-dev-qa-db-ja.com

bootstrap jquery show.bs.modalイベントは発生しません

私はbootstrap 3ドキュメントのモーダル例を使用しています。モーダルは機能します。ただし、発生時にshow.bs.modalイベントにアクセスする必要があります。今のところ私はちょうどしようとしています：

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

何も起こらず、イベントは発生しません。私は何を間違えていますか？？？これは私には意味がありません。

modal-dialogtwitter-bootstrap-3jquery
65
m4rlo

これを使って：

$(document).on('show.bs.modal','#myModal', function () {
  alert('hi');
})
75
ali

モーダルをインスタンス化してポップアップする前に、必ずon('shown.bs.modal')を配置してください

$("#myModal").on("shown.bs.modal", function () { 
    alert('Hi');
});
$("#myModal").modal('show'); //This can also be $("#myModal").modal({ show: true });

または

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

フィールドに集中するには、shown.bs.modalの代わりにshow.bs.modalを使用することをお勧めしますが、他の理由で、背景を非表示にしたり、モーダルが表示される直前に何かを設定したい場合は、 show.bs.modal関数。

73
Pierre

関数を$(document).ready(function() {、またはより単純に$(function() {でラップします。 CoffeeScriptでは、これは次のようになります

$ ->
  $('#myModal').on 'show.bs.modal', (event)->

これがないと、ドキュメントがロードされる前にJavaScriptが実行され、#myModalはまだDOMの一部ではありません。 ブートストラップリファレンス です。

16
Chloe

これを試して

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

shownの代わりにshowを使用すると、関数とアラートの最後にセミコロンがあることも確認してください。

9
Trevor
$(document).on('shown.bs.modal','.modal', function () {

/// TODO EVENTS

});
8
Zeekoi Inc.

同様のことが私に起こり、setTimeoutを使用して解決しました。

ブートストラップは、次のタイムアウトを使用して表示を完了しています。

c.TRANSITION_DURATION = 300、c.BACKDROP_TRANSITION_DURATION = 150、

したがって、300以上を使用する必要があり、私にとっては200が機能しています：

$('#myModal').on('show.bs.modal', function (e) {
    setTimeout(function(){
        //Do something if necessary
    }, 300);                        
})
6
itsazzad

スクリプトを「js/bootstrap」の呼び出しの前ではなく後に配置することを忘れないでください。

3
Iúri Batista Teles

私の場合、.modal-dialog divがありませんでした

イベントを起動しません：shown.bs.modal

<div id="loadingModal" class="modal fade">
  <p>Loading...</p>
</div>

イベントを実行します：shown.bs.modal

<div id="loadingModal" class="modal fade">
  <div class="modal-dialog">      
    <p>Loading...</p>
  </div>
</div>
3
aeroson

同様の問題がありましたが、$（ '＃myModal'）を使用しても動作しません。 $（window）を使用すると、機能するようになりました。

私の他の問題は、モーダルdiv htmlコンテンツをjavascript変数などに保存した場合、showイベントが発生しないことを発見したことです。

var content="<div id='myModal' ...";
$(content).modal();
$(window).on('show.bs.modal', function (e) {
  alert('show test');
});

発生しなかったため、イベントは発生しませんでした

私の修正は、HTML本文にdivを含めることでした

<body>
    <div id='myModal'>
       ...
    </div>
    <script>
        $('#myModal).modal();
        $(window).on('show.bs.modal', function (e) {
            alert('show test');
        });
    </script>
</body>
3
wjfinder77

Bootstrapを使用する前に、jQueryをロードしていることを確認してください。基本的に聞こえますが、これらのモーダルイベントのキャッチに問題があり、エラーはコードではなく、jQueryの前にBootstrapをロードしていたことがわかりました。

2
travelsize

これを追加：

$(document).ready(function(){
    $(document).on('shown.bs.modal','.modal', function () {
         // DO EVENTS
    });
});
2
zaarour

次の場合、これは機能しない場合があります。

1）$('#myModal').on('show.bs.modal'...)を含む行の前にJavaスクリプトコードにエラーがあります。トラブルシューティングを行うには、ページの読み込み時に警告メッセージが表示されるかどうかを確認するために、行の前に警告メッセージを配置します。解決するには、上記のJSを排除して、どれが問題かを確認します

2）もう1つの問題は、JSを間違った順序でロードした場合です。たとえば、実際にJQuery.jsをロードする前に、$('#myModal').on('show.bs.modal'...)部分を使用できます。その場合、呼び出しは無視されますので、最初にHTML（ページソースを確認）で、JQueryへのスクリプトリンクがモーダルonShow呼び出しの上にあるかどうかを確認してください。そうでない場合は無視されます。トラブルシューティングを行うには、前のショーをオンにしてアラートを入れます。 onShow関数内ではなく、前のものが表示される場合、その関数が実行できないことは明らかです。スペルが正しい場合、JQuery.jsへの呼び出しが行われないか、onShow部分の後に行われます

1
Marius

私の場合、問題はtravelsizeのコメントです。bootstrap.jsとjqueryの間のインポートの順序。私はテンプレートMetronicを使用しており、以前にチェックしていないため

0
Gregorio Centurión

詳細は次のとおりです。

show.bs.modalは動作しますが、モデルダイアログのロードはshown.bs.modalが動作して、ロード後に何かを実行します。レンダリング後

0
Anand

他のjqueryモーダルではなく、実際にbootstrap jqueryモーダルを使用していることを確認してください。

これで時間を無駄にしすぎて...

0
Didier Kernwein