Zdarzenie bootstrap jquery show.bs.modal nie zostanie uruchomione

Question 1

Używam modalnego przykładu z dokumentacji bootstrap 3. modalne działa. jednak muszę uzyskać dostęp do zdarzenia show.bs.modal, gdy jest uruchamiane. na razie próbuję tylko:

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

Nic się nie dzieje, zdarzenie nie jest uruchamiane. Co ja robię źle??? To nie ma dla mnie sensu.

Question 2

Użyj tego:

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

Question 3

Upewnij się, że umieściłeś swój on('shown.bs.modal')przed utworzeniem wystąpienia modalu, aby się pojawił

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

lub

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

Aby skupić się na polu, lepiej jest użyć shown.bs.modalzamiast tego, show.bs.modalale może z innych powodów chcesz ukryć coś w tle lub ustawić coś tuż przed rozpoczęciem wyświetlania modalu, użyj show.bs.modalfunkcji.

Question 4

Umieść swoją funkcję w $(document).ready(function() {lub po prostu $(function() {. W CoffeeScript wyglądałoby to tak

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

Bez tego JavaScript jest wykonywany przed załadowaniem dokumentu i #myModalnie jest jeszcze częścią DOM. Oto odniesienie do Bootstrap .

Question 5

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

/// TODO EVENTS

});

Question 6

Spróbuj tego

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

Używając shownzamiast, showupewnij się, że na końcu funkcji i ostrzeżenia znajdują się średniki.

Question 7

Dodaj:

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

Question 8

Przydarzyło mi się coś podobnego i rozwiązałem za pomocą setTimeout.

Bootstrap używa następującego limitu czasu do zakończenia wyświetlania:

c.TRANSITION_DURATION = 300, c.BACKDROP_TRANSITION_DURATION = 150,

Więc używanie ponad 300 musi działać, a dla mnie działa 200:

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

Question 9

W moim przypadku brakowało mi div .modal-dialog

Nie uruchamia zdarzenia: shown.bs.modal

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

Czy zdarzenie pożarowe: pokazane.bs.modalne

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

Question 10

Miałem podobny, ale inny problem i nadal nie mogę pracować, gdy używam $ ('# myModal'). Udało mi się to uruchomić, gdy używam $ (okno).

Mój inny problem polega na tym, że stwierdziłem, że zdarzenie show nie zostanie uruchomione, jeśli przechowuję zawartość html modalnego div w zmiennej javascript, takiej jak.

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

zdarzenie nigdy nie zostało uruchomione, ponieważ nie wystąpiło

moją poprawką było włączenie elementów div w treści HTML

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

Question 11

Pamiętaj, aby umieścić skrypt po wywołaniu "js / bootstrap", a nie przed.

Question 12

Upewnij się, że ładujesz jQuery przed użyciem Bootstrap. Brzmi prosto, ale miałem problemy z wychwyceniem tych zdarzeń modalnych i okazało się, że błąd nie był związany z moim kodem, ale że ładowałem Bootstrap przed jQuery.

Question 13

Czasami to nie działa, jeśli:

1) masz błąd w kodzie skryptu java przed wierszem z $('#myModal').on('show.bs.modal'...) . Aby rozwiązać problem, umieść komunikat ostrzegawczy przed wierszem, aby sprawdzić, czy pojawia się po załadowaniu strony. Aby rozwiązać problem, usuń JS powyżej, aby zobaczyć, który z nich jest problemem

2) Innym problemem jest ładowanie JS w złej kolejności. Na przykład możesz mieć $('#myModal').on('show.bs.modal'...)część przed faktycznym załadowaniem JQuery.js. W takim przypadku wywołanie zostanie zignorowane, więc najpierw w kodzie HTML (dla pewności wyświetl źródło strony) sprawdź, czy łącze skryptu do JQuery znajduje się powyżej onShowwywołania modalnego , w przeciwnym razie zostanie zignorowane. Aby rozwiązać problem, umieść alert w programie pokazanym wcześniej. Jeśli widzisz poprzedni, a nie ten wewnątrz funkcji onShow, jasne jest, że funkcja nie może zostać wykonana. Jeśli pisownia jest poprawna, najprawdopodobniej wywołanie JQuery.js nie zostanie wykonane lub zostanie wykonane po onShowczęści

Question 14

Miałem ten sam problem z bootstrap4. Rozwiązaniem było dodanie go wewnątrz funkcji ready () dokumentu jQuery:

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

Question 15

Upewnij się, że naprawdę używasz modalu bootstrap jquery, a nie innego modalu jquery.

Zmarnowałem na to zbyt dużo czasu ...

Question 16

Miałem ten sam problem. Dla mnie było to, że dwukrotnie załadowałem jquery w tej kolejności:

Załadowany jQuery
Załadowany plik Bootstrap
Ponownie załadowano jQuery

Kiedy jQuery został załadowany po raz drugi, w jakiś sposób zepsuł odniesienia do bootstrap i modal się otworzył, ale metoda on ('shown.bs ..') nigdy nie została uruchomiona.

Question 17

W moim przypadku problemem był komentarz travelsize .. Kolejność importu między bootstrap.js i jquery. Ponieważ używam szablonu Metronic i nie sprawdzam wcześniej

Question 18

Użyłem delegowania zdarzeń / bąbelków jQuery ... które zadziałały. Zobacz poniżej:

$(document).on('click', '#btnSubmit', function () {
                alert('hi loo');
            })

również bardzo dobre informacje: https://learn.jquery.com/events/event-delegation/

Question 19

Dzieje się tak, gdy kod mógł zostać wykonany wcześniej i nie jest wyświetlany, więc możesz dodać do niego timeout () tp fire.

$(document).on('shown.bs.modal', function (event) {
      setTimeout(function(){
        alert("Hi");
      },1000); 
    });

Question 20

Poniżej znajdują się szczegółowe informacje:

show.bs.modal działa podczas wczytywania okna dialogowego modelu shown.bs.modal działał, aby zrobić cokolwiek po załadowaniu. renderowanie postu

Answer 1

Używam modalnego przykładu z dokumentacji bootstrap 3. modalne działa. jednak muszę uzyskać dostęp do zdarzenia show.bs.modal, gdy jest uruchamiane. na razie próbuję tylko:

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

Nic się nie dzieje, zdarzenie nie jest uruchamiane. Co ja robię źle??? To nie ma dla mnie sensu.

Answer 2

103

Użyj tego:

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

Ali
źródło

8

To rozwiązało mój problem. Ale umieściłem go poza funkcją document.ready. Kiedy umieściłem w document.ready, nie działało. Może komuś pomóc.

Harish Chinju

2

Powinna to być akceptowana odpowiedź, ponieważ działa doskonale z dynamicznie tworzonymi modami ajax za pośrednictwem $(data).modal('show');.

kjdion84

2

Spowoduje to uruchomienie dla każdego modalu, który masz w dokumencie. Aby kierować tylko na określony modal, którego możesz użyć $(document).on('hidden.bs.modal', function (e) { if (e.target.id === 'my-modal-id') { alert('hi'); } });. Id tu pochodzi z<div class="modal fade" id="my-modal-id">

przno

2

@przno Nie byłoby, drugim argumentem jest selektor określający element.

Tom

Kiedy używasz $(document).on(..., dołączasz swój słuchacz do kontekstu dokumentu i nie ma znaczenia, czy twoje elementy docelowe istnieją, czy nie. Powinieneś dodać nazwę zdarzenia jako pierwszy argument, a funkcję wywołania zwrotnego jako ostatni, ale możesz dodać selektor zapytania jako drugi argument

Ali

Answer 3

8

To rozwiązało mój problem. Ale umieściłem go poza funkcją document.ready. Kiedy umieściłem w document.ready, nie działało. Może komuś pomóc.

Harish Chinju

Answer 4

2

Powinna to być akceptowana odpowiedź, ponieważ działa doskonale z dynamicznie tworzonymi modami ajax za pośrednictwem $(data).modal('show');.

kjdion84

Answer 5

2

Spowoduje to uruchomienie dla każdego modalu, który masz w dokumencie. Aby kierować tylko na określony modal, którego możesz użyć $(document).on('hidden.bs.modal', function (e) { if (e.target.id === 'my-modal-id') { alert('hi'); } });. Id tu pochodzi z<div class="modal fade" id="my-modal-id">

przno

Answer 6

2

@przno Nie byłoby, drugim argumentem jest selektor określający element.

Tom

Answer 7

Kiedy używasz $(document).on(..., dołączasz swój słuchacz do kontekstu dokumentu i nie ma znaczenia, czy twoje elementy docelowe istnieją, czy nie. Powinieneś dodać nazwę zdarzenia jako pierwszy argument, a funkcję wywołania zwrotnego jako ostatni, ale możesz dodać selektor zapytania jako drugi argument

Ali

Answer 8

82

Upewnij się, że umieściłeś swój on('shown.bs.modal')przed utworzeniem wystąpienia modalu, aby się pojawił

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

lub

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

Aby skupić się na polu, lepiej jest użyć shown.bs.modalzamiast tego, show.bs.modalale może z innych powodów chcesz ukryć coś w tle lub ustawić coś tuż przed rozpoczęciem wyświetlania modalu, użyj show.bs.modalfunkcji.

Pierre
źródło

@ kjdion84 - tam, gdzie je tworzysz, powinieneś powiązać zdarzenia. `var amodal = $ (" <div modal ... /> "); amodal.on (..., myfunc) .modal ('pokaż');

Pierre

Nie musisz wiązać żadnych wydarzeń, jeśli używasz $(document).on().

kjdion84,

3

^ To rozwiązuje mój problem. Ponadto, show.bs.modalróżni się od shown.bs.modal. Ten pierwszy uruchamia się, gdy modal ma się pokazać. To drugie, kiedy zostało pokazane. Duży inny.

Yukio Fukuzawa

@KUMAR jest to zdarzenie, które wywołuje bootstrap, gdy dzwonisz .modal('show'). Istnieją cztery imprezy Wymaga to czasowniki modalne: [ show.bs.modal, shown.bs.modal, hide.bs.modal, hidden.bs.modal] - pokazuje to, kiedy ma zamiar pokazać, pokazano, gdy jest widoczne, to samo dla skór i ukryte. getbootstrap.com/docs/3.4/javascript/#modals-events

Pierre

Answer 9

@ kjdion84 - tam, gdzie je tworzysz, powinieneś powiązać zdarzenia. `var amodal = $ (" <div modal ... /> "); amodal.on (..., myfunc) .modal ('pokaż');

Pierre

Answer 10

Nie musisz wiązać żadnych wydarzeń, jeśli używasz $(document).on().

kjdion84,

Answer 11

3

^ To rozwiązuje mój problem. Ponadto, show.bs.modalróżni się od shown.bs.modal. Ten pierwszy uruchamia się, gdy modal ma się pokazać. To drugie, kiedy zostało pokazane. Duży inny.

Yukio Fukuzawa

Answer 12

@KUMAR jest to zdarzenie, które wywołuje bootstrap, gdy dzwonisz .modal('show'). Istnieją cztery imprezy Wymaga to czasowniki modalne: [ show.bs.modal, shown.bs.modal, hide.bs.modal, hidden.bs.modal] - pokazuje to, kiedy ma zamiar pokazać, pokazano, gdy jest widoczne, to samo dla skór i ukryte. getbootstrap.com/docs/3.4/javascript/#modals-events

Pierre

Answer 13

Umieść swoją funkcję w $(document).ready(function() {lub po prostu $(function() {. W CoffeeScript wyglądałoby to tak

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

Bez tego JavaScript jest wykonywany przed załadowaniem dokumentu i #myModalnie jest jeszcze częścią DOM. Oto odniesienie do Bootstrap .

Answer 14

12

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

/// TODO EVENTS

});

Zeekoi Inc.
źródło

2

w jakiś sposób była to dla mnie najbardziej pomocna odpowiedź. wygląda na to, że rozwiązaniem była praca z .modalzamiast odwoływania się do identyfikatora modalnego ... dzięki!

mabu

Jest to najlepsza odpowiedź, ponieważ jest niespecyficzna i będzie się uruchamiać po wyświetleniu dowolnego modalu, a nie po wyzwoleniu tylko ustawionego modalu.

IDED

Answer 15

2

w jakiś sposób była to dla mnie najbardziej pomocna odpowiedź. wygląda na to, że rozwiązaniem była praca z .modalzamiast odwoływania się do identyfikatora modalnego ... dzięki!

mabu

Answer 16

Jest to najlepsza odpowiedź, ponieważ jest niespecyficzna i będzie się uruchamiać po wyświetleniu dowolnego modalu, a nie po wyzwoleniu tylko ustawionego modalu.

IDED

Answer 17

10

Spróbuj tego

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

Używając shownzamiast, showupewnij się, że na końcu funkcji i ostrzeżenia znajdują się średniki.

Trevor
źródło

7

Zarówno „show.bs.modal”, jak i „shown.bs.modal” powinny działać do moich celów, oba są wymienione jako prawidłowe zdarzenia w dokumentach bootstrap. nadal nie działa.

m4rlo

1

Czy sprawdziłeś, że twoje jQuery działa, np. $ (Document) .ready (function () {alert ('test');});

Trevor

tak, jeśli ustawię alert poza wydarzeniem pokazu, tylko w pliku document.ready, to zostanie uruchomiony.

m4rlo

1

@BassJobsen Dwa razy odwołuje się do application.js w swoim html, jeden z nich ładuje właściwy plik. Drugiego nie znaleziono. Czy to spowodowałoby problem?

Trevor

1

Dzięki @Trevor. Mnie też się udało. Uwzględniłem 2 jquery.js. :-p

Akshay

Answer 18

7

Zarówno „show.bs.modal”, jak i „shown.bs.modal” powinny działać do moich celów, oba są wymienione jako prawidłowe zdarzenia w dokumentach bootstrap. nadal nie działa.

m4rlo

Answer 19

1

Czy sprawdziłeś, że twoje jQuery działa, np. $ (Document) .ready (function () {alert ('test');});

Trevor

Answer 20

tak, jeśli ustawię alert poza wydarzeniem pokazu, tylko w pliku document.ready, to zostanie uruchomiony.

m4rlo

Answer 21

1

@BassJobsen Dwa razy odwołuje się do application.js w swoim html, jeden z nich ładuje właściwy plik. Drugiego nie znaleziono. Czy to spowodowałoby problem?

Trevor

Answer 22

1

Dzięki @Trevor. Mnie też się udało. Uwzględniłem 2 jquery.js. :-p

Akshay

Answer 23

7

Dodaj:

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

zaarour
źródło

Answer 24

Przydarzyło mi się coś podobnego i rozwiązałem za pomocą setTimeout.

Bootstrap używa następującego limitu czasu do zakończenia wyświetlania:

c.TRANSITION_DURATION = 300, c.BACKDROP_TRANSITION_DURATION = 150,

Więc używanie ponad 300 musi działać, a dla mnie działa 200:

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

Answer 25

1

To jest to, czego szukałem! Dziękuję za wskazanie czasu trwania przejścia bootstrap! Kudos: D Nawet 150 też działa :)

ShellZero

Answer 26

W moim przypadku brakowało mi div .modal-dialog

Nie uruchamia zdarzenia: shown.bs.modal

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

Czy zdarzenie pożarowe: pokazane.bs.modalne

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

Answer 27

Miałem podobny, ale inny problem i nadal nie mogę pracować, gdy używam $ ('# myModal'). Udało mi się to uruchomić, gdy używam $ (okno).

Mój inny problem polega na tym, że stwierdziłem, że zdarzenie show nie zostanie uruchomione, jeśli przechowuję zawartość html modalnego div w zmiennej javascript, takiej jak.

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

zdarzenie nigdy nie zostało uruchomione, ponieważ nie wystąpiło

moją poprawką było włączenie elementów div w treści HTML

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

Answer 28

3

Pamiętaj, aby umieścić skrypt po wywołaniu "js / bootstrap", a nie przed.

Iúri Batista Teles
źródło

Answer 29

Upewnij się, że ładujesz jQuery przed użyciem Bootstrap. Brzmi prosto, ale miałem problemy z wychwyceniem tych zdarzeń modalnych i okazało się, że błąd nie był związany z moim kodem, ale że ładowałem Bootstrap przed jQuery.

Answer 30

Czasami to nie działa, jeśli:

1) masz błąd w kodzie skryptu java przed wierszem z $('#myModal').on('show.bs.modal'...) . Aby rozwiązać problem, umieść komunikat ostrzegawczy przed wierszem, aby sprawdzić, czy pojawia się po załadowaniu strony. Aby rozwiązać problem, usuń JS powyżej, aby zobaczyć, który z nich jest problemem

2) Innym problemem jest ładowanie JS w złej kolejności. Na przykład możesz mieć $('#myModal').on('show.bs.modal'...)część przed faktycznym załadowaniem JQuery.js. W takim przypadku wywołanie zostanie zignorowane, więc najpierw w kodzie HTML (dla pewności wyświetl źródło strony) sprawdź, czy łącze skryptu do JQuery znajduje się powyżej onShowwywołania modalnego , w przeciwnym razie zostanie zignorowane. Aby rozwiązać problem, umieść alert w programie pokazanym wcześniej. Jeśli widzisz poprzedni, a nie ten wewnątrz funkcji onShow, jasne jest, że funkcja nie może zostać wykonana. Jeśli pisownia jest poprawna, najprawdopodobniej wywołanie JQuery.js nie zostanie wykonane lub zostanie wykonane po onShowczęści

Answer 31

To mi pomogło - $('#myModal').on('show.bs.modal'...)musi być po załadowaniu JQuery. Dzięki!

Ian Wold

Answer 32

Miałem ten sam problem z bootstrap4. Rozwiązaniem było dodanie go wewnątrz funkcji ready () dokumentu jQuery:

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

Answer 33

1

Upewnij się, że naprawdę używasz modalu bootstrap jquery, a nie innego modalu jquery.

Zmarnowałem na to zbyt dużo czasu ...

Didier Kernwein
źródło

Answer 34

Miałem ten sam problem. Dla mnie było to, że dwukrotnie załadowałem jquery w tej kolejności:

Załadowany jQuery
Załadowany plik Bootstrap
Ponownie załadowano jQuery

Kiedy jQuery został załadowany po raz drugi, w jakiś sposób zepsuł odniesienia do bootstrap i modal się otworzył, ale metoda on ('shown.bs ..') nigdy nie została uruchomiona.

Answer 35

0

W moim przypadku problemem był komentarz travelsize .. Kolejność importu między bootstrap.js i jquery. Ponieważ używam szablonu Metronic i nie sprawdzam wcześniej

Gregorio Centurión
źródło

Answer 36

Użyłem delegowania zdarzeń / bąbelków jQuery ... które zadziałały. Zobacz poniżej:

$(document).on('click', '#btnSubmit', function () {
                alert('hi loo');
            })

również bardzo dobre informacje: https://learn.jquery.com/events/event-delegation/

Answer 37

Dzieje się tak, gdy kod mógł zostać wykonany wcześniej i nie jest wyświetlany, więc możesz dodać do niego timeout () tp fire.

$(document).on('shown.bs.modal', function (event) {
      setTimeout(function(){
        alert("Hi");
      },1000); 
    });

Answer 38

Poniżej znajdują się szczegółowe informacje:

show.bs.modal działa podczas wczytywania okna dialogowego modelu shown.bs.modal działał, aby zrobić cokolwiek po załadowaniu. renderowanie postu

Zdarzenie bootstrap jquery show.bs.modal nie zostanie uruchomione

Odpowiedzi: