Bootstrap 3.3.2 Модальные события срабатывают многократно

Question

Bootstrap Modal Events огонь несколько раз, или, вернее, всегда еще раз, а потом. Я переношу модальные события в функцию щелчка, которая возвращает модальный идентификатор.

Как я могу убедиться, что событие всегда срабатывает только один раз, и только когда функция click вызвала его?

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

    });  

}); 

По умолчанию Bootstrap 3.3.2 Модальные 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 --> 

я посмотреть на 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 необходим в этом случае именно так? У меня есть проблема с пониманием того, как проходит клик вокруг.

Достигните ли щелчок в Bootstrap JS еще раз одним щелчком мыши? Почему он запускает события несколько раз без метода .off?

Спасибо.

(Я пытаюсь узнать Jquery из книги, если кто-нибудь там действительно есть хорошего книга или даже один и только книгу читать об этом, то, пожалуйста, стрелять мне записку, там так много всего там, и все утверждают, что они являются лучшими естественными .. спасибо.)

Answer 1

Почему это происходит несколько раз без использования метода .off?

Потому что каждый раз, когда элемент .img-modal нажат, вы подключаете нового события слушателя для show.bs.modal события. Вот почему событие show.bs.modal запускается еще раз при каждом нажатии.

Может кто-то объяснить мне, почему именно этот метод .off необходим в этом случае?

Метод .off() просто удаляет ранее прикрепленные события.

---

Вам не нужно использовать метод .off().

Вместо прикрепление слушателя событий для события show.bs.modal на каждом событии мыши, вы должны просто добавить один слушатель событий для всех элементов с классом .modal:

Example Here

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

В show.bs.modal события слушатель, this связан с элементом .modal, который отображается; поэтому вы можете определить, какой модаль отображается. В приведенном выше примере this.id будет modal-1.

Answer 2

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

В моем случае у меня было несколько удаленных_данных. '.off()' помог мне отвязать ранее связанное событие с целевым модальным.