tôi đang sử dụng ví dụ phương thức từ tài liệu bootstrap 3. phương thức hoạt động. tuy nhiên tôi cần truy cập sự kiện show.bs.modal khi nó kích hoạt. bây giờ tôi chỉ đang cố gắng:
$('#myModal').on('show.bs.modal', function () {
alert('hi')
})
Không có gì xảy ra, sự kiện không phát hỏa. Tôi đang làm gì sai ??? Điều này không có ý nghĩa đối với tôi.
Câu trả lời:
dùng cái này:
$(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'); } });. Tôi ở đây đến từ<div class="modal fade" id="my-modal-id">
$(document).on(...bạn gắn trình nghe của mình vào ngữ cảnh tài liệu , và nó không quan trọng nếu số bầu chọn mục tiêu của bạn có tồn tại hay không. Bạn nên thêm tên sự kiện làm đối số đầu tiên và gọi lại người hâm mộ như cuối cùng, nhưng bạn có thể thêm bộ chọn truy vấn làm đối số thứ hai
Đảm bảo bạn đặt on('shown.bs.modal')trước khi khởi tạo phương thức để bật lên
$("#myModal").on("shown.bs.modal", function () {
alert('Hi');
});
$("#myModal").modal('show'); //This can also be $("#myModal").modal({ show: true });
hoặc là
$("#myModal").on("shown.bs.modal", function () {
alert('Hi');
}).modal('show');
Để tập trung vào một trường, tốt hơn nên sử dụng shown.bs.modalthay thế cho show.bs.modalnhưng có thể vì lý do khác mà bạn muốn ẩn một thứ gì đó làm nền hoặc đặt một cái gì đó ngay trước khi phương thức bắt đầu hiển thị, hãy sử dụng show.bs.modalhàm.
$(document).on().
show.bs.modallà khác với shown.bs.modal. Trước đây sẽ kích hoạt khi phương thức sắp được hiển thị. Cái sau khi nó đã được hiển thị. Lớn khác nhau.
show.bs.modalgì?
.modal('show'). Có bốn sự kiện mà họ gọi cho modals: [ show.bs.modal, shown.bs.modal, hide.bs.modal, hidden.bs.modal] - show là khi nó sẽ hiển thị, hiển thị khi nó được hiển thị, tương tự cho trốn ẩn. getbootstrap.com/docs/3.4/javascript/#modals-events
Gói chức năng của bạn vào $(document).ready(function() {, hoặc đơn giản hơn $(function() {,. Trong CoffeeScript, điều này sẽ giống như
$ ->
$('#myModal').on 'show.bs.modal', (event)->
Nếu không có nó, JavaScript sẽ thực thi trước khi tải tài liệu và #myModalchưa phải là một phần của DOM. Đây là tài liệu tham khảo Bootstrap .
$(document).on('shown.bs.modal','.modal', function () {
/// TODO EVENTS
});
.modalthay vì tham chiếu id phương thức là giải pháp ... cảm ơn!
Thử đi
$('#myModal').on('shown.bs.modal', function () {
alert('hi');
});
Sử dụng shownthay vì showcũng đảm bảo rằng bạn có dấu chấm phẩy ở cuối hàm và cảnh báo.
Điều tương tự đã xảy ra với tôi và tôi đã giải quyết bằng cách sử dụng setTimeout.
Bootstrap đang sử dụng thời gian chờ sau để hoàn thành hiển thị:
c.TRANSITION_DURATION = 300, c.BACKDROP_TRANSITION_DURATION = 150,
Vì vậy, sử dụng hơn 300 phải hoạt động và đối với tôi 200 là hoạt động:
$('#myModal').on('show.bs.modal', function (e) {
setTimeout(function(){
//Do something if necessary
}, 300);
})
Trong trường hợp của tôi, tôi đã thiếu div .modal-hộp thoại
Sự kiện không kích hoạt: show.bs.modal
<div id="loadingModal" class="modal fade">
<p>Loading...</p>
</div>
Sự kiện có cháy không: show.bs.modal
<div id="loadingModal" class="modal fade">
<div class="modal-dialog">
<p>Loading...</p>
</div>
</div>
Tôi đã gặp sự cố tương tự nhưng khác và vẫn không thể hoạt động khi tôi sử dụng $ ('# myModal'). Tôi đã có thể làm cho nó hoạt động khi tôi sử dụng $ (window).
Vấn đề khác của tôi là tôi thấy rằng sự kiện hiển thị sẽ không kích hoạt nếu tôi lưu trữ nội dung html phương thức div của mình trong một biến javascript như.
var content="<div id='myModal' ...";
$(content).modal();
$(window).on('show.bs.modal', function (e) {
alert('show test');
});
sự kiện không bao giờ kích hoạt bởi vì nó không xảy ra
bản sửa lỗi của tôi là đưa các div vào phần thân html
<body>
<div id='myModal'>
...
</div>
<script>
$('#myModal).modal();
$(window).on('show.bs.modal', function (e) {
alert('show test');
});
</script>
</body>
Hãy nhớ đặt tập lệnh sau lệnh gọi "js / bootstrap", không đặt trước.
Đảm bảo rằng bạn đang tải jQuery trước khi sử dụng Bootstrap. Nghe có vẻ cơ bản, nhưng tôi đã gặp sự cố khi bắt các sự kiện phương thức này và hóa ra lỗi không phải do mã của tôi mà là do tôi đang tải Bootstrap trước jQuery.
Đôi khi điều này không hoạt động nếu:
1) bạn gặp lỗi trong mã tập lệnh java trước dòng của bạn với $('#myModal').on('show.bs.modal'...) . Để khắc phục sự cố, hãy đặt thông báo cảnh báo trước dòng để xem nó có xuất hiện khi bạn tải trang hay không. Để giải quyết, hãy loại bỏ JS ở trên để xem cái nào là vấn đề
2) Một vấn đề khác là nếu bạn tải JS không đúng thứ tự. Ví dụ, bạn có thể có $('#myModal').on('show.bs.modal'...)một phần trước khi thực sự tải JQuery.js. Trong trường hợp đó, lệnh gọi của bạn sẽ bị bỏ qua, vì vậy trước tiên trong HTML (xem nguồn trang để chắc chắn) hãy kiểm tra xem liên kết tập lệnh tới JQuery có nằm trên onShowlệnh gọi phương thức của bạn hay không, nếu không nó sẽ bị bỏ qua. Để khắc phục sự cố, hãy đặt một cảnh báo bên trong màn hình đang bật trước đó. Nếu bạn thấy cái trước chứ không phải cái bên trong hàm onShow thì rõ ràng là hàm không thể thực thi. Nếu chính tả đúng thì nhiều khả năng cuộc gọi của bạn tới JQuery.js không được thực hiện hoặc nó được thực hiện sau onShowphần
$('#myModal').on('show.bs.modal'...)cần phải có sau khi JQuery được tải. Cảm ơn!
Tôi đã gặp vấn đề tương tự với bootstrap4. Giải pháp là thêm nó vào bên trong hàm ready () của tài liệu jQuery:
$(document).ready(function() {
$('#myModal').on('show.bs.modal', function () {
alert('hi')
})
}
Đảm bảo rằng bạn thực sự sử dụng bootstrap phương thức jquery chứ không phải phương thức jquery khác.
Lãng phí quá nhiều thời gian cho việc này ...
Có cùng một vấn đề. Đối với tôi, đó là tôi đã tải jquery hai lần theo thứ tự này:
Khi jQuery được tải lần thứ hai, bằng cách nào đó, nó đã phá vỡ các tham chiếu đến bootstrap và phương thức được mở nhưng phương thức on ('show.bs ..') không bao giờ được kích hoạt.
Trong trường hợp của tôi, vấn đề là cách bình luận travelsize .. Thứ tự nhập giữa bootstrap.js và jquery. Bởi vì tôi đang sử dụng mẫu Metronic và không kiểm tra trước
tôi đã sử dụng ủy quyền sự kiện / sôi nổi của jQuery ... phù hợp với tôi. Xem bên dưới:
$(document).on('click', '#btnSubmit', function () {
alert('hi loo');
})
thông tin rất tốt nữa: https://learn.jquery.com/events/event-delegation/
Điều này xảy ra khi mã có thể đã được thực thi trước đó và nó không hiển thị, vì vậy bạn có thể thêm thời gian chờ () cho nó tp fire.
$(document).on('shown.bs.modal', function (event) {
setTimeout(function(){
alert("Hi");
},1000);
});