बूटस्ट्रैप jquery show.bs.modal इवेंट में आग नहीं लगेगी

Question

मैं बूटस्ट्रैप 3 डॉक्स से मोडल उदाहरण का उपयोग कर रहा हूं। मोडल काम करता है। हालाँकि, जब मुझे आग लगती है तो मुझे show.bs.modal इवेंट का उपयोग करने की आवश्यकता होती है। अभी के लिए मैं बस कोशिश कर रहा हूँ:

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

कुछ भी नहीं होता है, घटना आग नहीं है। मैं क्या गलत कर रहा हूं??? इससे मुझे कोई मतलब नहीं है।

Answer 1

इसे इस्तेमाल करो:

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

Comments

इससे मेरी समस्या हल हो गई। लेकिन मैंने इसे डॉक्यूमेंट.बेड के बाहर रखा। जब मैंने डॉक्यूमेंट के भीतर रखा। पहले से, यह काम नहीं कर रहा था। किसी की मदद कर सकते हैं।

— हरीश चिंटू

यह स्वीकृत उत्तर होना चाहिए क्योंकि यह गतिशील रूप से बनाए गए अजाक्स मॉडल्स के साथ पूरी तरह से काम करता है $(data).modal('show');।

— kjdion84

यह आपके पास दस्तावेज़ पर मौजूद प्रत्येक मोडल के लिए आग लगाएगा। केवल विशिष्ट मोडल को लक्षित करने के लिए जिसका आप उपयोग कर सकते हैं $(document).on('hidden.bs.modal', function (e) { if (e.target.id === 'my-modal-id') { alert('hi'); } });। यहाँ आईडी से आता है<div class="modal fade" id="my-modal-id">

— przno

@przno नहीं, यह नहीं होगा, दूसरा तर्क चयनकर्ता है जो तत्व को निर्दिष्ट करता है।

— टॉम 13

जब आप उपयोग $(document).on(...करते हैं तो आप अपने श्रोता को दस्तावेज़ के संदर्भ में संलग्न करते हैं , और इससे कोई फर्क नहीं पड़ता कि आपका लक्ष्य हाथी मौजूद है या नहीं। आपको अंतिम तर्क के रूप में ईवेंट का नाम जोड़ना चाहिए और अंतिम के रूप में कॉलबैक प्रशंसक होना चाहिए, लेकिन आप एक क्वेरी चयनकर्ता को दूसरे तर्क के रूप में जोड़ सकते हैं

— अली

Answer 2

सुनिश्चित करें कि आप 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फ़ंक्शन का उपयोग करें ।

Comments

@ kjdion84 - वहाँ जहाँ आप उन्हें बनाते हैं, आपको घटनाओं को बांधना चाहिए। `var अमोडल = $ (" <div modal ... /> "); amodal.on (..., myfunc) .modal ( 'शो');

— पियरे

यदि आप उपयोग करते हैं तो आपको किसी भी कार्यक्रम को बांधने की आवश्यकता नहीं है $(document).on()।

— kjdion84

^ यह मेरी समस्या का हल करता है। साथ ही, इससे 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 3

अपने फंक्शन को लपेटें $(document).ready(function() {, या अधिक, बस $(function() {। CoffeeScript में, यह ऐसा दिखेगा

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

इसके बिना, जावास्क्रिप्ट दस्तावेज़ लोड होने से पहले निष्पादित कर रहा है, और #myModalअभी तक डोम का हिस्सा नहीं है। यहाँ बूटस्ट्रैप संदर्भ है ।

Answer 4

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

/// TODO EVENTS

});

Comments

किसी तरह यह मेरे लिए सबसे उपयोगी जवाब था। ऐसा लगता है जैसे .modalmodals id के समाधान के बजाय साथ काम करना समाधान था ... धन्यवाद!

— माबू

यह सबसे अच्छा उत्तर है क्योंकि यह निरर्थक है और किसी भी मॉडल पर दिखाया जाएगा बजाय इसके कि केवल एक सेट मोडल ट्रिगर हो।

— 19

Answer 5

इसे इस्तेमाल करे

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

shownइसके बजाय का उपयोग करके showयह भी सुनिश्चित करें कि आपके पास अपने फ़ंक्शन और चेतावनी के अंत में अपने अर्ध कॉलन हैं।

Comments

दोनों 'show.bs.modal' और 'show.bs.modal' दोनों को मेरे उद्देश्यों के लिए काम करना चाहिए, वे दोनों बूटस्ट्रैप डॉक्स में मान्य घटनाओं के रूप में सूचीबद्ध हैं। अभी भी काम नहीं करता है।

— m4rlo

क्या आपने सत्यापित किया है कि आपका jQuery काम कर रहा है जैसे $ (दस्तावेज़)। पहले से ही (फ़ंक्शन () {चेतावनी ('परीक्षण')}));

— ट्रेवर

हाँ, अगर मैं केवल दस्तावेज़ के भीतर, शो ईवेंट के बाहर एक चेतावनी देता हूं, तो यह आग लग जाती है।

— m4rlo

@BassJobsen वह अपने html में दो बार application.js संदर्भित कर रहा है उनमें से एक सही फ़ाइल लोड कर रहा है। दूसरे को यह नहीं मिला .. क्या इस मुद्दे का कारण होगा?

— ट्रेवर

धन्यवाद @ ट्रेवर इसने मेरे लिए भी काम किया। मैं 2 jquery.js सहित था। :-प

— अक्षय विश्नोई

Answer 6

इसे जोड़ो:

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

Answer 7

मेरे साथ भी ऐसा ही हुआ है और मैंने सेटटाइमआउट का उपयोग करके हल किया है।

पूरा दिखाने के लिए बूटस्ट्रैप निम्नलिखित टाइमआउट का उपयोग कर रहा है:

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);                        
})

Comments

यही तो मैं खोज रहा हूं! बूटस्ट्रैप की संक्रमण अवधि को इंगित करने के लिए धन्यवाद!

— कुदोस

Answer 8

मेरे मामले में, मुझे .modal-dialog div याद आ रही थी

आग घटना नहीं करता है: show.bs.modal

<div id="loadingModal" class="modal fade">
  <p>Loading...</p>
</div>

आग घटना करता है: show.bs.modal

<div id="loadingModal" class="modal fade">
  <div class="modal-dialog">      
    <p>Loading...</p>
  </div>
</div>

Answer 9

मेरे पास एक समान लेकिन अलग समस्या थी और अभी भी काम करने में असमर्थ हूं जब मैं $ ('# myModal') का उपयोग करता हूं। जब मैं $ (विंडो) का उपयोग कर रहा था, तो मैं इसे काम करने में सक्षम था।

मेरी दूसरी समस्या यह है कि मैंने पाया कि अगर मैं अपने जावास्क्रिप्ट div की सामग्री को जावास्क्रिप्ट चर में संग्रहीत करता हूं तो शो इवेंट में आग नहीं लगेगी।

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

घटना कभी नहीं हुई क्योंकि यह घटित नहीं हुआ था

html शरीर में divs को शामिल करने के लिए मेरा फिक्स था

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

Answer 10

स्क्रिप्ट को "js / बूटस्ट्रैप" के कॉल के बाद रखना याद रखें, इससे पहले नहीं।

Answer 11

बूटस्ट्रैप का उपयोग करने से पहले सुनिश्चित करें कि आप jQuery लोड कर रहे हैं। मूल लगता है, लेकिन मुझे इन मोडल घटनाओं को पकड़ने में समस्या आ रही थी और पता चला कि त्रुटि मेरे कोड के साथ नहीं थी लेकिन मैं jQuery से पहले बूटस्ट्रैप लोड कर रहा था।

Answer 12

कभी-कभी यह काम नहीं करता है यदि:

1) आपको अपनी लाइन से पहले जावा स्क्रिप्ट कोड में कोई त्रुटि है $('#myModal').on('show.bs.modal'...)। पेज लोड करने पर यह देखने के लिए कि क्या यह ऊपर आता है, लाइन में आने से पहले एक अलर्ट मैसेज का निवारण करने के लिए। जेएस को खत्म करने के लिए यह देखने के लिए कि कौन सी समस्या है

2) एक और समस्या यह है कि यदि आप जेएस को गलत क्रम में लोड करते हैं। उदाहरण के लिए, आपके पास $('#myModal').on('show.bs.modal'...)वास्तव में JQuery.js लोड करने से पहले भाग हो सकता है । उस स्थिति में आपकी कॉल को नज़रअंदाज़ कर दिया जाएगा, इसलिए पहले HTML (सुनिश्चित करने के लिए पृष्ठ स्रोत देखें) जांचें कि क्या JQuery की स्क्रिप्ट लिंक आपके मोडल onShowकॉल से ऊपर है , अन्यथा इसे अनदेखा कर दिया जाएगा। समस्या निवारण के लिए पहले एक शो में अंदर एक चेतावनी डाल दी। यदि आप पहले वाले को देखते हैं और ऑनस्वा फ़ंक्शन के अंदर नहीं तो यह स्पष्ट है कि फ़ंक्शन निष्पादित नहीं कर सकता है। यदि वर्तनी संभावना से अधिक सही है तो JQuery.js पर आपका कॉल नहीं किया गया है या यह onShowभाग के बाद बनाया गया है

Comments

इससे मुझे मदद मिली - $('#myModal').on('show.bs.modal'...)JQuery लोड होने के बाद होना चाहिए। धन्यवाद!

— इयान वोल्ड

Answer 13

मैं बूटस्ट्रैप 4 के साथ एक ही मुद्दा था। समाधान इसे jQuery दस्तावेज़ तैयार () फ़ंक्शन के अंदर जोड़ने का था:

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

Answer 14

सुनिश्चित करें कि आप वास्तव में बूटस्ट्रैप jquery मोडल का उपयोग करते हैं न कि किसी अन्य jquery मोडल का।

इस पर बहुत समय बर्बाद किया ...

Answer 15

एक ही मुद्दा था। मेरे लिए यह था कि मैंने इस क्रम में दो बार jquery को लोड किया:

1. लोड किया गया jQuery
2. लोडेड बूटस्ट्रैप
3. फिर से लोड किया गया jQuery

जब jQuery को दूसरी बार लोड किया गया था तो उसने किसी तरह बूटस्ट्रैप के संदर्भ को तोड़ दिया और मोडल खुल गया लेकिन ऑन ('दिखाया.बस ..') विधि कभी भी फायर नहीं हुई।

Answer 16

मेरे मामले में समस्या यह थी कि कैसे यात्रा की गई टिप्पणी .. बूटस्ट्रैप के बीच आयात का क्रम। js और jquery। क्योंकि मैं मेट्रोनिक टेम्प्लेट का उपयोग कर रहा हूं और इससे पहले जांच नहीं करता हूं

Answer 17

मैंने jQuery के इवेंट डेलिगेशन / बुब्बलिंग का उपयोग किया ... जो मेरे लिए काम करता है। निचे देखो:

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

बहुत अच्छी जानकारी भी: https://learn.jquery.com/events/event-delegation/

Answer 18

ऐसा तब होता है जब कोड पहले निष्पादित किया जा सकता है और यह दिखाई नहीं दे रहा है ताकि आप इसे tp आग के लिए टाइमआउट () जोड़ सकें।

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

Answer 19

नीचे दानेदार विवरण हैं:

show.bs.modal काम करता है, जबकि मॉडल संवाद लोडिंग दिखाया गया है ।bs.modal लोड होने के बाद कोई भी काम करने के लिए काम करता है। रेंडरिंग पोस्ट