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

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

Как я могу убедиться, что событие всегда срабатывает только один раз, и только когда его вызвала функция 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');

    });    

});

Default 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, которые срабатывают несколько раз и Bootstrap 3 - Дистанционно загруженный модальный создает повторяющиеся события javascript, и, похоже, это может быть достигнуто с помощью метода .off.

Таким образом, использование $(modalIdClicked).off().on('show.bs.modal', function(event) { сделало трюк в этом случае.

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

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

Спасибо.

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

Ответ 1

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

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

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

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

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

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

Пример здесь

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

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

Ответ 1

Ответ 2