событие bootstrap jquery show.bs.modal не срабатывает

Question 1

Я использую модальный пример из документации bootstrap 3. модальные работы. однако мне нужно получить доступ к событию show.bs.modal, когда оно срабатывает. пока я просто пытаюсь:

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

Ничего не происходит, событие не срабатывает. Что я делаю неправильно??? Для меня это не имеет смысла.

Question 2

использовать этот:

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

Question 3

Убедитесь, что вы поместили свой, 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функцию.

Question 4

Оберните функцию $(document).ready(function() {, или более просто, $(function() {. В CoffeeScript это будет выглядеть так:

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

Без него JavaScript выполняется до загрузки документа и #myModalеще не является частью DOM. Вот ссылка на Bootstrap .

Question 5

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

/// TODO EVENTS

});

Question 6

Попробуй это

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

Использование shownвместо showтакже убедитесь, что у вас есть точки с запятой в конце вашей функции и предупреждения.

Question 7

Добавь это:

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

Question 8

Подобное случилось со мной, и я решил использовать 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);                        
})

Question 9

В моем случае мне не хватало div .modal-dialog

Не запускает событие: 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>

Question 10

У меня была похожая, но другая проблема, и я все еще не мог работать, когда использую $ ('# myModal'). Мне удалось заставить его работать, когда я использовал $ (window).

Другая моя проблема заключается в том, что я обнаружил, что событие show не сработает, если я сохраню свое модальное содержимое div html в переменной javascript, например.

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

событие не сработало, потому что оно не произошло

Мое исправление заключалось в том, чтобы включить div в тело html

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

Question 11

Не забудьте поместить сценарий после вызова «js / bootstrap», а не до него.

Question 12

Убедитесь, что вы загружаете jQuery, прежде чем использовать Bootstrap. Звучит просто, но у меня возникли проблемы с отловом этих модальных событий, и оказалось, что ошибка была не в моем коде, а в том, что я загружал Bootstrap до jQuery.

Question 13

Иногда это не работает, если:

1) у вас есть ошибка в коде java-скрипта перед вашей строкой с $('#myModal').on('show.bs.modal'...). Для устранения неполадок поместите предупреждающее сообщение перед строкой, чтобы узнать, появляется ли оно при загрузке страницы. Чтобы решить проблему, устраните указанные выше JS и посмотрите, в чем проблема.

2) Другая проблема заключается в том, что вы загружаете JS в неправильном порядке. Например, вы можете получить $('#myModal').on('show.bs.modal'...)часть до того, как фактически загрузите JQuery.js. В этом случае ваш вызов будет проигнорирован, поэтому сначала в HTML (просмотрите исходный код страницы, чтобы быть уверенным) проверьте, находится ли ссылка скрипта на JQuery над вашим модальным onShowвызовом, иначе она будет проигнорирована. Чтобы устранить неполадки, поместите предупреждение внутри включенного ранее. Если вы видите предыдущий, а не тот, который находится внутри функции onShow, очевидно, что функция не может выполняться. Если написание правильное, скорее всего, ваш вызов JQuery.js не выполняется или выполняется после onShowчасти

Question 14

У меня была такая же проблема с bootstrap4. Решением было добавить его в функцию ready () документа jQuery:

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

Question 15

Убедитесь, что вы действительно используете модальное окно начальной загрузки jquery, а не другое модальное окно jquery.

Слишком много времени потрачено на это ...

Question 16

Была такая же проблема. Для меня это было то, что я дважды загрузил jquery в таком порядке:

Загружен jQuery
Загруженный Bootstrap
Снова загружен jQuery

Когда jQuery был загружен во второй раз, он каким-то образом нарушил ссылки на bootstrap и модальное окно открылось, но метод on ('shown.bs ..') не сработал.

Question 17

В моем случае проблема заключалась в том, как комментарий по размеру путешествия. Порядок импорта между bootstrap.js и jquery. Потому что я использую шаблон Metronic и раньше не проверял

Question 18

Я использовал делегирование / всплытие событий jQuery ... это сработало для меня. Смотри ниже:

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

тоже очень хорошая информация: https://learn.jquery.com/events/event-delegation/

Question 19

Это происходит, когда код мог быть выполнен раньше, но он не отображается, поэтому вы можете добавить для него timeout () tp fire.

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

Question 20

Ниже приведены подробные сведения:

show.bs.modal работает при загрузке диалогового окна модели. shown.bs.modal выполнял любые действия после загрузки. рендеринг сообщений

Answer 1

Я использую модальный пример из документации bootstrap 3. модальные работы. однако мне нужно получить доступ к событию show.bs.modal, когда оно срабатывает. пока я просто пытаюсь:

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

Ничего не происходит, событие не срабатывает. Что я делаю неправильно??? Для меня это не имеет смысла.

Answer 2

103

использовать этот:

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

Али
источник

8

Это решило мою проблему. Но я поместил его вне функции document.ready. Когда я поместил в document.ready, он не работал. Может кому-нибудь помочь.

Harish Chinju

2

Это должен быть принятый ответ, поскольку он отлично работает с динамически создаваемыми модальными окнами ajax через $(data).modal('show');.

kjdion84

2

Это сработает для каждого модального окна документа. Чтобы настроить таргетинг только на определенные модальные окна, которые вы могли бы использовать $(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">

przno

2

@przno Нет, второй аргумент - это селектор, определяющий элемент.

Том

Когда вы используете, $(document).on(...вы прикрепляете свой слушатель к контексту документа , и не имеет значения, существуют ли ваши целевые элементы или нет. Вы должны добавить имя события в качестве первого аргумента, а функцию обратного вызова - в качестве последнего, но вы можете добавить селектор запросов в качестве второго аргумента

Али

Answer 3

8

Это решило мою проблему. Но я поместил его вне функции document.ready. Когда я поместил в document.ready, он не работал. Может кому-нибудь помочь.

Harish Chinju

Answer 4

2

Это должен быть принятый ответ, поскольку он отлично работает с динамически создаваемыми модальными окнами ajax через $(data).modal('show');.

kjdion84

Answer 5

2

Это сработает для каждого модального окна документа. Чтобы настроить таргетинг только на определенные модальные окна, которые вы могли бы использовать $(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">

przno

Answer 6

2

@przno Нет, второй аргумент - это селектор, определяющий элемент.

Том

Answer 7

Когда вы используете, $(document).on(...вы прикрепляете свой слушатель к контексту документа , и не имеет значения, существуют ли ваши целевые элементы или нет. Вы должны добавить имя события в качестве первого аргумента, а функцию обратного вызова - в качестве последнего, но вы можете добавить селектор запросов в качестве второго аргумента

Али

Answer 8

82

Убедитесь, что вы поместили свой, 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функцию.

Пьер
источник

@ kjdion84 - туда, где вы их создаете, вы должны привязать свои события. `var amodal = $ (" <div модальный ... /> "); amodal.on (..., myfunc) .modal ('показать');

Pierre

Вам не нужно связывать какие-либо события, если вы используете $(document).on().

kjdion84

3

^ Это решает мою проблему. Кроме того, show.bs.modalотличается от shown.bs.modal. Первый срабатывает, когда модальное окно будет показано. Последнее, когда это было показано. Большой разный.

Юкио Фукудзава

@KUMAR - это событие, которое вызывает бутстрап, когда вы звоните .modal('show'). Есть четыре события он призывает к модальностям: [ show.bs.modal, shown.bs.modal, hide.bs.modal, hidden.bs.modal] - шоу , когда он собирается показать, как показано , когда она показывает, то же самое для шкуры и скрыты. getbootstrap.com/docs/3.4/javascript/#modals-events

Пьер,

Answer 9

@ kjdion84 - туда, где вы их создаете, вы должны привязать свои события. `var amodal = $ (" <div модальный ... /> "); amodal.on (..., myfunc) .modal ('показать');

Pierre

Answer 10

Вам не нужно связывать какие-либо события, если вы используете $(document).on().

kjdion84

Answer 11

3

^ Это решает мою проблему. Кроме того, show.bs.modalотличается от shown.bs.modal. Первый срабатывает, когда модальное окно будет показано. Последнее, когда это было показано. Большой разный.

Юкио Фукудзава

Answer 12

@KUMAR - это событие, которое вызывает бутстрап, когда вы звоните .modal('show'). Есть четыре события он призывает к модальностям: [ show.bs.modal, shown.bs.modal, hide.bs.modal, hidden.bs.modal] - шоу , когда он собирается показать, как показано , когда она показывает, то же самое для шкуры и скрыты. getbootstrap.com/docs/3.4/javascript/#modals-events

Пьер,

Answer 13

Оберните функцию $(document).ready(function() {, или более просто, $(function() {. В CoffeeScript это будет выглядеть так:

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

Без него JavaScript выполняется до загрузки документа и #myModalеще не является частью DOM. Вот ссылка на Bootstrap .

Answer 14

12

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

/// TODO EVENTS

});

Zeekoi Inc.
источник

2

почему-то это был для меня самый полезный ответ. похоже, что работа с .modalмодальным идентификатором была решением вместо ссылки ... спасибо!

mabu

Это лучший ответ, поскольку он неспецифичен и срабатывает при отображении любого модального окна, а не только при срабатывании установленного модального триггера.

IDED

Answer 15

2

почему-то это был для меня самый полезный ответ. похоже, что работа с .modalмодальным идентификатором была решением вместо ссылки ... спасибо!

mabu

Answer 16

Это лучший ответ, поскольку он неспецифичен и срабатывает при отображении любого модального окна, а не только при срабатывании установленного модального триггера.

IDED

Answer 17

10

Попробуй это

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

Использование shownвместо showтакже убедитесь, что у вас есть точки с запятой в конце вашей функции и предупреждения.

Тревор
источник

7

Для моих целей должны работать как show.bs.modal, так и show.bs.modal, они оба указаны как допустимые события в документации начальной загрузки. все еще не работает.

m4rlo

1

Вы проверили, что ваш jQuery работает, например, $ (document) .ready (function () {alert ('test');});

Trevor

да, если я помещаю предупреждение вне события шоу, только в document.ready, оно срабатывает.

m4rlo

1

@BassJobsen Он дважды ссылается на application.js в своем html-файле, один из них загружает правильный файл. Другой не найден .. Это вызовет проблему?

Trevor

1

Спасибо @Trevor. У меня это тоже сработало. Я включил 2 jquery.js. :-p

Акшай Вишной 03

Answer 18

7

Для моих целей должны работать как show.bs.modal, так и show.bs.modal, они оба указаны как допустимые события в документации начальной загрузки. все еще не работает.

m4rlo

Answer 19

1

Вы проверили, что ваш jQuery работает, например, $ (document) .ready (function () {alert ('test');});

Trevor

Answer 20

да, если я помещаю предупреждение вне события шоу, только в document.ready, оно срабатывает.

m4rlo

Answer 21

1

@BassJobsen Он дважды ссылается на application.js в своем html-файле, один из них загружает правильный файл. Другой не найден .. Это вызовет проблему?

Trevor

Answer 22

1

Спасибо @Trevor. У меня это тоже сработало. Я включил 2 jquery.js. :-p

Акшай Вишной 03

Answer 23

7

Добавь это:

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

Заарур
источник

Answer 24

Подобное случилось со мной, и я решил использовать 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);                        
})

Answer 25

1

Это то, что я искал! Спасибо, что указали на продолжительность перехода бутстрапа! Престижность: D Даже 150 тоже работает :)

ShellZero

Answer 26

В моем случае мне не хватало div .modal-dialog

Не запускает событие: 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>

Answer 27

У меня была похожая, но другая проблема, и я все еще не мог работать, когда использую $ ('# myModal'). Мне удалось заставить его работать, когда я использовал $ (window).

Другая моя проблема заключается в том, что я обнаружил, что событие show не сработает, если я сохраню свое модальное содержимое div html в переменной javascript, например.

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

событие не сработало, потому что оно не произошло

Мое исправление заключалось в том, чтобы включить div в тело html

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

Answer 28

3

Не забудьте поместить сценарий после вызова «js / bootstrap», а не до него.

Юри Батиста Телес
источник

Answer 29

Убедитесь, что вы загружаете jQuery, прежде чем использовать Bootstrap. Звучит просто, но у меня возникли проблемы с отловом этих модальных событий, и оказалось, что ошибка была не в моем коде, а в том, что я загружал Bootstrap до jQuery.

Answer 30

Иногда это не работает, если:

1) у вас есть ошибка в коде java-скрипта перед вашей строкой с $('#myModal').on('show.bs.modal'...). Для устранения неполадок поместите предупреждающее сообщение перед строкой, чтобы узнать, появляется ли оно при загрузке страницы. Чтобы решить проблему, устраните указанные выше JS и посмотрите, в чем проблема.

2) Другая проблема заключается в том, что вы загружаете JS в неправильном порядке. Например, вы можете получить $('#myModal').on('show.bs.modal'...)часть до того, как фактически загрузите JQuery.js. В этом случае ваш вызов будет проигнорирован, поэтому сначала в HTML (просмотрите исходный код страницы, чтобы быть уверенным) проверьте, находится ли ссылка скрипта на JQuery над вашим модальным onShowвызовом, иначе она будет проигнорирована. Чтобы устранить неполадки, поместите предупреждение внутри включенного ранее. Если вы видите предыдущий, а не тот, который находится внутри функции onShow, очевидно, что функция не может выполняться. Если написание правильное, скорее всего, ваш вызов JQuery.js не выполняется или выполняется после onShowчасти

Answer 31

Это мне помогло - $('#myModal').on('show.bs.modal'...)должно быть после загрузки JQuery. Благодаря!

Ян Уолд,

Answer 32

У меня была такая же проблема с bootstrap4. Решением было добавить его в функцию ready () документа jQuery:

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

Answer 33

Убедитесь, что вы действительно используете модальное окно начальной загрузки jquery, а не другое модальное окно jquery.

Слишком много времени потрачено на это ...

Answer 34

Была такая же проблема. Для меня это было то, что я дважды загрузил jquery в таком порядке:

Загружен jQuery
Загруженный Bootstrap
Снова загружен jQuery

Когда jQuery был загружен во второй раз, он каким-то образом нарушил ссылки на bootstrap и модальное окно открылось, но метод on ('shown.bs ..') не сработал.

Answer 35

В моем случае проблема заключалась в том, как комментарий по размеру путешествия. Порядок импорта между bootstrap.js и jquery. Потому что я использую шаблон Metronic и раньше не проверял

Answer 36

Я использовал делегирование / всплытие событий jQuery ... это сработало для меня. Смотри ниже:

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

тоже очень хорошая информация: https://learn.jquery.com/events/event-delegation/

Answer 37

Это происходит, когда код мог быть выполнен раньше, но он не отображается, поэтому вы можете добавить для него timeout () tp fire.

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

Answer 38

Ниже приведены подробные сведения:

show.bs.modal работает при загрузке диалогового окна модели. shown.bs.modal выполнял любые действия после загрузки. рендеринг сообщений

событие bootstrap jquery show.bs.modal не срабатывает

Ответы: