Bootstrap 3.3.2 Modale Ereignisse feuern mehrmals

Question

Bootstrap Modal Events Feuer mehrmals, oder immer immer noch einmal mehr als vorher. Ich umschließe die modalen Ereignisse in einer Klickfunktion, die die modale ID für jetzt zurückgibt.

Wie kann ich sicherstellen, dass das Ereignis immer nur einmal ausgelöst wird und nur dann, wenn die Klick-Funktion es aufgerufen hat?

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

    });  

}); 

Standard Bootstrap 3.3.2 Modal HTML

<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 --> 

Ich habe einen Blick auf jQuery click events firing multiple times und Bootstrap 3 - Remotely loaded modal creates duplicate javascript events und es scheint, kann dies mit dem .off Verfahren erreicht werden.

So mit $(modalIdClicked).off().on('show.bs.modal', function(event) { tat der Trick in diesem Fall.

Kann mir bitte jemand erklären warum diese .off Methode wird in diesem Fall genau benötigt? Ich habe Problem zu verstehen, wie der Klick um übergeben wird.

Erreicht der Klick das Bootstrap JS noch einmal mit jedem Klick? Warum werden die Ereignisse mehrmals ohne die Methode .off ausgelöst?

Vielen Dank.

(Ich versuche, jQuery aus einem Buch, wenn jemand da draußen wirklich ein gut Buch oder sogar den einzigen Buch muss zu lernen, darüber zu lesen, dann tun Sie mir bitte eine Notiz schießen, da ist so viele da draußen und alle behaupten, die beste natürlich sein .. danke.)

Answer 1

Warum feuert die Ereignisse mehrere Male ohne die .off Methode?

Denn jedes Mal das Element .img-modal geklickt wird, werden Sie ein neuer Ereignis-Listener für das Ereignis show.bs.modal anbringen. Aus diesem Grund wird das Ereignis show.bs.modal bei jedem Klick erneut ausgelöst.

Kann mir bitte jemand erklären, warum diese .off Methode in diesem Fall genau benötigt wird?

Die Methode .off() entfernt einfach die zuvor angehängten Ereignisse.

---

Sie brauchen nicht die .off() Methode zu verwenden.

Example Here

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

Im show.bs.modal Veranstaltung:

vielmehr einen Ereignis-Listener für das Ereignis show.bs.modal auf jedem Klick Ereignis als angebracht wird, sollten Sie nur einen einzigen Ereignis-Listener für alle Elemente mit Klasse .modal hinzufügen Listener, this ist an das Element .modal gebunden, das angezeigt wird; Daher können Sie identifizieren, welches Modal angezeigt wird. Im obigen Beispiel wird this.idmodal-1 sein.

Answer 2

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

In meinem Fall hatte ich mehrere remote_loads. '.off()' half mir, zuvor gebundene Ereignisse an das Zielmodal zu binden.