я використовую модальний приклад із bootstrap 3 docs. модальний працює. однак мені потрібно отримати доступ до події 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'); } });. Ід тут походить<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
Не запускає подію: показаний.bs.modal
<div id="loadingModal" class="modal fade">
<p>Loading...</p>
</div>
Чи пожежна подія: показано. Bs
<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. Рішенням було додати його всередину функції jQuery document ready ():
$(document).ready(function() {
$('#myModal').on('show.bs.modal', function () {
alert('hi')
})
}
Переконайтеся, що ви дійсно використовуєте завантажувальний ремінь JQuery модальне , а не інший JQuery модальне.
Затрачено занадто багато часу на це ...
Був той самий випуск. Для мене це було те, що я завантажував jquery двічі в такому порядку:
Коли jQuery завантажувався вдруге, він якось зламав посилання на bootstrap і модаль відкрився, але метод on ('показано.bs ..') ніколи не запускався.
У моєму випадку проблема полягала в тому, як розмір коментується. Порядок імпорту між bootstrap.js та jquery. Тому що я використовую шаблон Metronic і раніше не перевіряю
я використовував делегування подій / барботування jQuery ..., що працювало у мене. Дивись нижче:
$(document).on('click', '#btnSubmit', function () {
alert('hi loo');
})
дуже гарна інформація теж: https://learn.jquery.com/events/event-delegation/
Це трапляється, коли код може виконуватися раніше, і він не відображається, тому ви можете додати тайм-аут () для його tp fire.
$(document).on('shown.bs.modal', function (event) {
setTimeout(function(){
alert("Hi");
},1000);
});