Я использую модальный пример из документации bootstrap 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(...вы прикрепляете свой слушатель к контексту документа , и не имеет значения, существуют ли ваши целевые элементы или нет. Вы должны добавить имя события в качестве первого аргумента, а функцию обратного вызова - в качестве последнего, но вы можете добавить селектор запросов в качестве второго аргумента
Убедитесь, что вы поместили свой, 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'). Есть четыре события он призывает к модальностям: [ show.bs.modal, shown.bs.modal, hide.bs.modal, hidden.bs.modal] - шоу , когда он собирается показать, как показано , когда она показывает, то же самое для шкуры и скрыты. getbootstrap.com/docs/3.4/javascript/#modals-events
$(document).on('shown.bs.modal','.modal', function () {
/// TODO EVENTS
});
.modalмодальным идентификатором была решением вместо ссылки ... спасибо!
Попробуй это
$('#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);
})
В моем случае мне не хватало 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>
У меня была похожая, но другая проблема, и я все еще не мог работать, когда использую $ ('# 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>
Не забудьте поместить сценарий после вызова «js / bootstrap», а не до него.
Убедитесь, что вы загружаете jQuery, прежде чем использовать Bootstrap. Звучит просто, но у меня возникли проблемы с отловом этих модальных событий, и оказалось, что ошибка была не в моем коде, а в том, что я загружал Bootstrap до jQuery.
Иногда это не работает, если:
1) у вас есть ошибка в коде java-скрипта перед вашей строкой с $('#myModal').on('show.bs.modal'...). Для устранения неполадок поместите предупреждающее сообщение перед строкой, чтобы узнать, появляется ли оно при загрузке страницы. Чтобы решить проблему, устраните указанные выше JS и посмотрите, в чем проблема.
2) Другая проблема заключается в том, что вы загружаете JS в неправильном порядке. Например, вы можете получить $('#myModal').on('show.bs.modal'...)часть до того, как фактически загрузите JQuery.js. В этом случае ваш вызов будет проигнорирован, поэтому сначала в HTML (просмотрите исходный код страницы, чтобы быть уверенным) проверьте, находится ли ссылка скрипта на JQuery над вашим модальным onShowвызовом, иначе она будет проигнорирована. Чтобы устранить неполадки, поместите предупреждение внутри включенного ранее. Если вы видите предыдущий, а не тот, который находится внутри функции onShow, очевидно, что функция не может выполняться. Если написание правильное, скорее всего, ваш вызов JQuery.js не выполняется или выполняется после onShowчасти
$('#myModal').on('show.bs.modal'...)должно быть после загрузки JQuery. Благодаря!
У меня была такая же проблема с bootstrap4. Решением было добавить его в функцию ready () документа jQuery:
$(document).ready(function() {
$('#myModal').on('show.bs.modal', function () {
alert('hi')
})
}
Убедитесь, что вы действительно используете модальное окно начальной загрузки jquery, а не другое модальное окно jquery.
Слишком много времени потрачено на это ...
Была такая же проблема. Для меня это было то, что я дважды загрузил jquery в таком порядке:
Когда jQuery был загружен во второй раз, он каким-то образом нарушил ссылки на bootstrap и модальное окно открылось, но метод on ('shown.bs ..') не сработал.
В моем случае проблема заключалась в том, как комментарий по размеру путешествия. Порядок импорта между bootstrap.js и jquery. Потому что я использую шаблон Metronic и раньше не проверял
Я использовал делегирование / всплытие событий jQuery ... это сработало для меня. Смотри ниже:
$(document).on('click', '#btnSubmit', function () {
alert('hi loo');
})
тоже очень хорошая информация: https://learn.jquery.com/events/event-delegation/
Это происходит, когда код мог быть выполнен раньше, но он не отображается, поэтому вы можете добавить для него timeout () tp fire.
$(document).on('shown.bs.modal', function (event) {
setTimeout(function(){
alert("Hi");
},1000);
});