bootstrap 3 belgelerinden modal örneği kullanıyorum. modal çalışır. ancak, ateşlendiğinde show.bs.modal olayına erişmem gerekiyor. şimdilik sadece deniyorum:
$('#myModal').on('show.bs.modal', function () {
alert('hi')
})
Hiçbir şey olmuyor, olay ateşlenmiyor. Neyi yanlış yapıyorum??? Bu bana mantıklı gelmiyor.
Yanıtlar:
bunu kullan:
$(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'); } });. Kimliğin geldiği yer<div class="modal fade" id="my-modal-id">
$(document).on(..., dinleyicinizi belgeye bağlamış olursunuz ve hedef öğelerinizin var olup olmadığı önemli değildir. İlk bağımsız değişken olarak olay adını ve son olarak geri arama işlevini eklemelisiniz, ancak ikinci bağımsız değişken olarak bir sorgu seçici ekleyebilirsiniz
on('shown.bs.modal')Açmak için modal'ı başlatmadan önce yerleştirdiğinizden emin olun .
$("#myModal").on("shown.bs.modal", function () {
alert('Hi');
});
$("#myModal").modal('show'); //This can also be $("#myModal").modal({ show: true });
veya
$("#myModal").on("shown.bs.modal", function () {
alert('Hi');
}).modal('show');
Bir alana odaklanmak için shown.bs.modalyerine kullanmak daha iyidir , show.bs.modalancak belki başka nedenlerle arka planda bir şeyi gizlemek veya modal gösterilmeye başlamadan hemen önce bir şey ayarlamak istiyorsanız, show.bs.modalişlevi kullanın .
$(document).on().
show.bs.modalbundan farklıdır shown.bs.modal. Birincisi, modal görünmek üzereyken patlar. İkincisi, gösterildiğinde. Büyük farklı.
.modal('show'). O kavram fiilleri için çağrı dört etkinlik yok: [ show.bs.modal, shown.bs.modal, hide.bs.modal, hidden.bs.modal] - gösterisi buna gösterilmeye başladığında, gösterilen deri için aynı ve gizli göstermek için gidiyor zamandır. getbootstrap.com/docs/3.4/javascript/#modals-events
İşlevinizi $(document).ready(function() {veya daha basit bir şekilde sarın $(function() {. CoffeeScript'te bu şöyle görünecektir:
$ ->
$('#myModal').on 'show.bs.modal', (event)->
Bu olmadan JavaScript, belge yüklenmeden önce yürütülür ve #myModalhenüz DOM'un bir parçası değildir. İşte Bootstrap referansı .
$(document).on('shown.bs.modal','.modal', function () {
/// TODO EVENTS
});
.modalçözüm kimliğine başvurmak yerine onunla çalışmak gibi görünüyor ... teşekkürler!
Bunu dene
$('#myModal').on('shown.bs.modal', function () {
alert('hi');
});
shownBunun yerine kullanarak show, işlevinizin ve uyarınızın sonunda noktalı virgüllerin bulunduğundan emin olun.
Bana da benzer bir şey oldu ve setTimeout kullanarak çözdüm.
Bootstrap, gösterimi tamamlamak için aşağıdaki zaman aşımını kullanıyor:
c.TRANSITION_DURATION = 300, c.BACKDROP_TRANSITION_DURATION = 150,
Yani 300'den fazla kullanmak işe yaramalı ve benim için 200 çalışıyor:
$('#myModal').on('show.bs.modal', function (e) {
setTimeout(function(){
//Do something if necessary
}, 300);
})
Benzer ama farklı bir sorun yaşadım ve $ ('# myModal') kullandığımda hala çalışamıyorum. $ (Pencere) kullandığımda onu çalıştırmayı başardım.
Diğer sorunum ise, modal div html içeriğimi.
var content="<div id='myModal' ...";
$(content).modal();
$(window).on('show.bs.modal', function (e) {
alert('show test');
});
olay gerçekleşmediği için asla ateşlenmedi
benim düzeltmem, div'leri html gövdesine dahil etmekti
<body>
<div id='myModal'>
...
</div>
<script>
$('#myModal).modal();
$(window).on('show.bs.modal', function (e) {
alert('show test');
});
</script>
</body>
Komut dosyasını "js / bootstrap" çağrısından sonra koymayı unutmayın, öncesine değil.
Bootstrap'i kullanmadan önce jQuery'yi yüklediğinizden emin olun. Kulağa basit geliyor, ancak bu kalıcı olayları yakalamada sorunlar yaşıyordum ve hatanın kodumda olmadığı, ancak jQuery'den önce Bootstrap'i yüklediğim ortaya çıktı.
Bazen bu işe yaramazsa:
1) ile satırınızdan önce java betik kodunda bir hata var $('#myModal').on('show.bs.modal'...). Sorunu gidermek için, sayfayı yüklediğinizde gelip gelmediğini görmek için satırın önüne bir uyarı mesajı koyun. Sorunun hangisi olduğunu görmek için yukarıdaki JS'leri ortadan kaldırmak için
2) Başka bir sorun da JS'yi yanlış sırayla yüklemenizdir. Örneğin, $('#myModal').on('show.bs.modal'...)JQuery.js'yi gerçekten yüklemeden önce parçaya sahip olabilirsiniz . Bu durumda aramanız yok sayılacaktır, bu nedenle ilk önce HTML'de (emin olmak için sayfa kaynağını görüntüleyin) JQuery'ye giden komut dosyası bağlantısının modal onShowçağrınızın üstünde olup olmadığını kontrol edin , aksi takdirde yok sayılır. Sorun gidermek için daha önce bir tane gösterinin içine bir uyarı koyun. OnShow işlevinin içindekini değil de öncekini görüyorsanız, işlevin yürütülemeyeceği açıktır. Yazım doğruysa, JQuery.js çağrınız yapılmamışsa veya onShowparçadan sonra yapılmışsa
$('#myModal').on('show.bs.modal'...)JQuery yüklendikten sonra olmalı. Teşekkürler!
Bootstrap4 ile aynı sorunu yaşadım. Çözüm, bunu jQuery document ready () işlevinin içine eklemekti:
$(document).ready(function() {
$('#myModal').on('show.bs.modal', function () {
alert('hi')
})
}
Başka bir jquery modeli değil , gerçekten bootstrap jquery modelini kullandığınızdan emin olun .
Bunun için çok zaman harcadım ...
Benim durumumda sorun, travelsize yorumunun nasıl olduğuydu .. Bootstrap.js ve jquery arasındaki içe aktarım sırası. Çünkü Metronic şablonunu kullanıyorum ve daha önce kontrol etmiyorum
jQuery'nin benim için çalışan olay delegasyonunu / köpürmesini kullandım. Aşağıya bakınız:
$(document).on('click', '#btnSubmit', function () {
alert('hi loo');
})
çok iyi bilgi: https://learn.jquery.com/events/event-delegation/
Bu, kod daha önce yürütüldüğünde ve görünmediğinde olur, böylece tp fire için timeout () ekleyebilirsiniz.
$(document).on('shown.bs.modal', function (event) {
setTimeout(function(){
alert("Hi");
},1000);
});