बूटस्ट्रैप 3.3.2 मॉडल घटनाएं कई बार आग लगती हैं

Question

Bootstrap Modal Events कई बार आग लगती है, या फिर हमेशा एक और बार आग लगती है। मैं एक क्लिक फ़ंक्शन में मोडल इवेंट लपेटता हूं जो अभी के लिए मोडल आईडी देता है।

मैं कैसे सुनिश्चित कर सकता हूं कि ईवेंट हमेशा एक बार आग लगती है, और केवल तभी जब क्लिक फ़ंक्शन ने इसे बुलाया?

jQuery

$('.img-modal').on('click', function() { 

// returns #modal-Id 
var modalIdClicked = $(this).attr('data-target') 
console.log ('modal id clicked from .img-modal = '+ modalIdClicked); 

console.log ('.img-modal clicked'); 

    $(modalIdClicked).on('show.bs.modal', function(event) { 

     console.log ('show.bs.modal'); 

    });  

}); 

डिफ़ॉल्ट बूटस्ट्रैप 3.3.2 मोडल एचटीएमएल

<div class="col-md-7"> 
    <img class="img-modal img-responsive cursor-pointer" data-toggle="modal" data-target="#modal-1" src="www" alt="image"> 
</div> 

<!-- Modal --> 
<div class="modal fade top-space-0" id="modal-1" tabindex="-1" role="dialog"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content cursor-pointer" data-toggle="modal" data-target="#modal-1"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="#modal-1">CLOSE &times;</button> 
       <h1 class="modal-title">Modal Title</h1> 
      </div> 

      <div class="modal-body"> 
       <div class="img-center"> 
        <img class="img-modal img-responsive" src="wwww" alt="image"> 
       </div> 
      </div> 

      <div class="modal-footer"> 
       <a href="#" class="btn btn-default" data-dismiss="modal">Close</a> 
      </div> 
     </div> 
    </div> 
</div> 
<!-- Modal end --> 

मैं jQuery click events firing multiple times और Bootstrap 3 - Remotely loaded modal creates duplicate javascript events पर एक नजर है किया था और यह इस .off विधि के साथ प्राप्त किया जा सकता है।

तो $(modalIdClicked).off().on('show.bs.modal', function(event) { का उपयोग करके इस मामले में चाल चल रही थी।

क्या कोई मुझे कृपया समझा सकता है क्यों इस .off इस मामले में विधि की आवश्यकता है? मुझे समस्या है यह समझने में समस्या है कि क्लिक के आसपास कैसे पारित किया जाता है।

क्या क्लिक प्रत्येक बूट के साथ बूटस्ट्रैप जेएस तक एक और बार पहुंचता है? .off विधि के बिना घटनाओं को कई बार क्यों आग लगती है?

धन्यवाद।

(मैं एक किताब से jQuery जानने के लिए, अगर वहाँ बाहर किसी भी एक सच में एक अच्छा किताब है या उसमें इस बारे में पढ़ने के लिए कोशिश कर रहा हूँ भी एक और केवल पुस्तक, तो मुझे एक नोट गोली मार कृपया, वहाँ वहाँ बहुत सारे हैं और सभी स्वाभाविक रूप से सबसे अच्छा होने का दावा करते हैं .. धन्यवाद।)

Answer 1

.off विधि के बिना घटनाओं को कई बार क्यों आग लगती है?

क्योंकि हर बार तत्व .img-modal क्लिक किया जाता है, तो आप show.bs.modal घटना के लिए एक नया घटना श्रोता संलग्न कर रहे हैं। यही कारण है कि घटना show.bs.modal प्रत्येक क्लिक पर एक और बार निकाल दिया जाता है।

क्या कोई मुझे बता सकता है कि इस मामले में .off विधि की आवश्यकता क्यों है?

.off() विधि बस पहले संलग्न ईवेंट को हटा देता है।

---

आपको .off() विधि का उपयोग करने की आवश्यकता नहीं है।

Example Here

$('.modal').on('show.bs.modal', function (event) { 
    console.log(this.id); 
}); 

show.bs.modal घटना के भीतर:

बल्कि प्रत्येक क्लिक घटना पर घटना show.bs.modal के लिए एक घटना श्रोता संलग्न की तुलना में, तो आप सिर्फ एक ही कार्यक्रम श्रोता सभी तत्वों के लिए वर्ग .modal साथ जोड़ना चाहिए श्रोता, this दिखाया गया है कि .modal तत्व से जुड़ा हुआ है; इसलिए आप पहचान सकते हैं कि कौन सा मोडल प्रदर्शित होता है। उपरोक्त उदाहरण में, this.idmodal-1 होगा।

Answer 2

modal.off().on('show.bs.modal', function(){ 
    modalBody.load(remote_content); 
}); 

मेरे मामले में, मुझे एकाधिक रिमोट_लोड का सामना करना पड़ रहा था। '.off()' ने मुझे लक्ष्य मोडल में पहले बाध्य घटना को अनबाइंड करने में मदद की।