ブートストラップ3ドキュメントのモーダルの例を使用しています。モーダルは機能します。ただし、発生時にshow.bs.modalイベントにアクセスする必要があります。今のところ私は試しているだけです：
$('#myModal').on('show.bs.modal', function () {
alert('hi')
})
何も起こらず、イベントは発生しません。私は何が間違っているのですか？これは私には意味がありません。
回答:
これを使って：
$(document).on('show.bs.modal','#myModal', function () {
alert('hi');
})
$(data).modal('show');です。
$(document).on('hidden.bs.modal', function (e) { if (e.target.id === 'my-modal-id') { alert('hi'); } });。ここのIDはから来ています<div class="modal fade" id="my-modal-id">
$(document).on(...するときは、リスナーをドキュメントコンテキストにアタッチします。これは、ターゲット要素が存在するかどうかに関係ありません。最初の引数としてイベント名を追加し、最後にコールバック機能を追加する必要がありますが、2番目の引数としてクエリセレクターを追加できます
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関数を使用します。
$(document).on()。
show.bs.modalとは異なりshown.bs.modalます。前者は、モーダルが表示されようとしているときに発生します。それが示されているときの後者。大きく異なります。
.modal('show')。それはモーダルを求めて4つのイベントがあります：[ show.bs.modal、shown.bs.modal、hide.bs.modal、hidden.bs.modal] -ショーは表示されたときに、示さ隠すために同じと隠され、表示するために起こっているときです。getbootstrap.com/docs/3.4/javascript/#modals-events
関数を$(document).ready(function() {、またはもっと簡単に、でラップします$(function() {。CoffeeScriptでは、これは次のようになります。
$ ->
$('#myModal').on 'show.bs.modal', (event)->
これがないと、JavaScriptはドキュメントが読み込まれる前に実行され、#myModalまだDOMの一部ではありません。これがブートストラップリファレンスです。
これを試して
$('#myModal').on('shown.bs.modal', function () {
alert('hi');
});
のshown代わりにを使用してshow、関数とアラートの最後にセミコロンがあることを確認してください。
同様のことが私にも起こり、setTimeoutを使用して解決しました。
Bootstrapは、次のタイムアウトを使用して表示を完了しています。
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);
})
同様の問題がありましたが、$（ '＃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>
スクリプトは、「js / bootstrap」の呼び出しの前ではなく、後に配置することを忘れないでください。
Bootstrapを使用する前に、jQueryをロードしていることを確認してください。基本的に聞こえますが、これらのモーダルイベントのキャッチに問題があり、エラーはコードにあるのではなく、jQueryの前にBootstrapをロードしていたことがわかりました。
次の場合、これが機能しないことがあります。
1）$('#myModal').on('show.bs.modal'...)。を使用する行の前に、Javaスクリプトコードにエラーがあります。トラブルシューティングを行うには、行の前にアラートメッセージを配置して、ページの読み込み時にアラートメッセージが表示されるかどうかを確認します。解決するには、上記のJSを削除して、どちらが問題であるかを確認します
2）もう1つの問題は、JSを間違った順序でロードした場合です。たとえば、$('#myModal').on('show.bs.modal'...)実際にJQuery.jsをロードする前にパーツを作成できます。その場合、呼び出しは無視されるため、最初にHTML（ページソースを表示してください）で、JQueryへのスクリプトリンクがモーダルonShow呼び出しの上にあるかどうかを確認してください。そうでない場合は無視されます。トラブルシューティングを行うには、前のショーの中にアラートを入れます。onShow関数内のものではなく、前のものが表示されている場合は、関数を実行できないことは明らかです。スペルが正しい場合は、JQuery.jsの呼び出しが行われていないか、onShowパーツの後に行われます。
$('#myModal').on('show.bs.modal'...)た-JQueryがロードされた後にする必要があります。ありがとう！
bootstrap4でも同じ問題が発生しました。解決策は、jQueryドキュメントのready（）関数内に追加することでした。
$(document).ready(function() {
$('#myModal').on('show.bs.modal', function () {
alert('hi')
})
}
本当にブートストラップを使用していることを確認してください別のjqueryモーダルではなくjqueryモーダル。
これであまりにも多くの時間を無駄にしました...
私の場合、問題はtravelsizeのコメント方法でした。bootstrap.jsとjqueryの間のインポートの順序。テンプレートMetronicを使用していて、前にチェックしないため
私はjQueryのイベント委任/バブリングを使用しました...それは私のために働きました。下記参照：
$(document).on('click', '#btnSubmit', function () {
alert('hi loo');
})
非常に良い情報もあります：https：//learn.jquery.com/events/event-delegation/