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 из книги, если у кого-то есть действительно хорошая книга или даже единственная книга, чтобы прочитать об этом, то, пожалуйста, стреляйте в меня запиской, там так много, и все претендуют на то, чтобы быть лучшими естественно.. спасибо.)

Ответы

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

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