ट्विटर बूटस्ट्रैप मॉडल एकाधिक घटना फायरिंग

Question

यह एक अजीब मुद्दा है और मैंने एक उत्तर खोजा है लेकिन मुझे वह नहीं मिला जो मेरे कोड को उपयुक्त बनाता है।

EDIT: यह समस्या भारी अजाक्स पृष्ठ पर होती है, जहां पृष्ठ को रीफ्रेश नहीं किया जाता है और मॉडल का पुन: उपयोग किया जा रहा है।

कृपया ध्यान दें मेरी जावास्क्रिप्ट तो मैं शायद इस मुद्दे को गलत

मैं पाया है इसी तरह के मुद्दों here और here

दोनों समस्या का वर्णन मैं कर रहा हूँ, लेकिन मैं सिर्फ बुला दृश्य को अपडेट आ रहा एक छोटे से कमजोर है छिपा हुआ मैं एक बटन घटना से बंधे नहीं है।

मैं कई Modals परिभाषित

<div id="modal_small" class="modal hide fade in"> 
    </div> 
    <div id="modal_large" class="modal hide fade in"> 
    </div> 

मैं इन क्रियार्थ द्योतक का पुन: उपयोग कर सकते है। तो modal_large एक फॉर्म बनाने के लिए एक सेकंड प्रदर्शित कर रहा है और इसके बाद यह उन छवियों की एक सूची दिखा रहा है जिन्हें आप चुन सकते हैं।

मैं निम्न स्क्रिप्ट ध्यान में रखते हुए गुजर उपयोग करते हुए मेरे क्रियार्थ द्योतक प्रत्येक उदाहरण

 function show_modal_large(href) { 
      $.get(href, function (data) { 
       $('#modal_large').html(data); 
       $('#modal_large').modal('show'); 
      }); 
     }; 

मेरे यहाँ लक्ष्य इन क्रियार्थ द्योतक का पुन: उपयोग करने के लिए है में दिखाई जाने वाली प्रस्तुत करना। और इस जहां समस्या निहित है मेरा मानना ​​है

में "$ (document) .ready" दृश्य जो मोडल मैं इस स्क्रिप्ट क्रियार्थ द्योतक 'छुपा' घटना के लिए बाध्य करने के लिए कॉल प्रदर्शित करने के लिए जा रहा है की

$('#modal_large').on('hidden', function() { 
       // Make Ajax Call - THIS WORKS 
    }); 

तो इमेजिंग आपके पास अपनी चुनी हुई छवियों को दिखाते हुए एक दृश्य पर एक सूची है। फिर आप एक मॉडल खोलें और अधिक छवियों का चयन करें। छिपे हुए मैं कॉलिंग फॉर्म पर चयनित छवियों को अद्यतन करता हूं।

हर चीज ठीक काम करती है।

मुद्दा:

पहली बार मैं मोडल खोलने के लिए और यह घटना 'छिपा हुआ पर' एक बार गोली चलाई है बंद कर दें। दूसरी बार जब मैं 'छिपा हुआ' ईवेंट मोडल खोलता और बंद करता हूं, तो दो बार कॉल होता है, तीसरी बार तीन कॉल और इसी तरह। यदि मैं अलग-अलग 'छुपे हुए' ईवेंट के साथ कुछ और के लिए मोडल का उपयोग करता हूं तो छिपी हुई घटना को नए छिपे हुए ईवेंट के लिए चार बार कॉल किया जाता है, और पुराने छिपे हुए ईवेंट के लिए चार बार कॉल किया जाता है। थोड़ी देर के बाद मेरा सिस्टम बस सभी AJAX कॉल के साथ मर जाता है।

क्या मुझे कुछ याद आ रही है? मुझे अपना कोड कैसे ढूढ़ना चाहिए ताकि ऐसा न हो?

Answer 1

ठीक है यह पता लगाया ... अच्छी तरह से। उम्मीद है कि यह कोड किसी और के लिए उपयोग में है।

जैसा कि मैं मोडल की 'छिपी हुई' घटना के लिए बाध्यकारी था, हर बार जब यह बनाया गया था तो मैं बस एक और बाध्यकारी जोड़ रहा था और पिछले सभी बाध्यों को भी एक और कॉल कर रहा था।

तो इस पर आने के लिए मैं

<div id="modal_small" class="modal hide fade in"> 
</div> 
<div id="modal_large" class="modal hide fade in"> 
</div> 

और इसके बजाय उनमें से के रूप में मैं उन्हें इतना और 'छुपा' के लिए वापस एक कॉल में गुजर तरह की जरूरत है मैं गतिशील क्रियार्थ द्योतक बनाएंगे, वे पुराने मॉडल घोषणाओं से छुटकारा मिला घटना

 function show_modal_large(href, callback) { 
      // create guid to name of this Modal 
      var randomNum = guid(); 
      // create element with guid id 
      var elementName = '#' + randomNum.toString(); 
      $('body').append("<div id=" + randomNum + " class='modal hide fade in'></div>"); 
      // create Modal and show 
      $.get(href, function (data) { 
       $(elementName).html(data); 
       // register call back to 'hidden' event 
       $(elementName).on('hidden', function() { 
        callback(); 
        // clean up after hidden 
        $(elementName).unbind(); 
        $(elementName).remove(); 
       }); 
       $(elementName).modal('show'); 
      }); 
     }; 

     function s4() { 
      return Math.floor((1 + Math.random()) * 0x10000) 
         .toString(16) 
         .substring(1); 
     }; 

     function guid() { 
      return s4() + s4() + '-' + s4() + '-' + s4() + '-' + 
        s4() + '-' + s4() + s4() + s4(); 
     } 

मैं Stackoverflow question here

यह मेरे लिए अच्छा काम करता है से Guid निर्माण हो गया। और मेरा मुद्दा हल करता है।

Answer 2

आप .on के बजाय .one का उपयोग भी कर सकते हैं और जिस घटना को आप बाध्यकारी कर रहे हैं वह केवल एक बार आग लग जाएगा। उपरोक्त उदाहरण में