Bootstrap 3.3.2模式事件多次触发 [英] Bootstrap 3.3.2 Modal events fire multiple times

问题描述

启动模式事件会多次触发，或者总是比以前多触发一次.我将模式事件包装在一个单击函数中，该函数现在返回模式ID.

Bootstrap Modal Events fire multiple times, or rather always one more time then before. I wrap the modal events in a click function that returns the modal id for now.

如何确保事件始终仅在click函数调用事件时才触发一次?

How can I make sure the event always only fires once, and only when the click function invoked it?

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

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

我确实查看了多次触发jQuery点击事件， 引导程序3-远程加载的模式会创建重复的javascript事件看来这可以通过.off方法来实现.

I did have a look at jQuery click events firing multiple times and Bootstrap 3 - Remotely loaded modal creates duplicate javascript events and it seems this can be achieved with the .off method.

因此在这种情况下，使用$(modalIdClicked).off().on('show.bs.modal', function(event) {可以解决问题.

So using $(modalIdClicked).off().on('show.bs.modal', function(event) { did the trick in this case.

有人可以向我解释为什么，在这种情况下到底需要这种.off方法吗?我在难以理解点击如何传递.

Can someone please explain to me why this .off method is needed in this case exactly? I am having trouble understanding how the click is passed around.

每次点击后，点击是否又一次到达Bootstrap JS?为什么在没有.off方法的情况下会多次触发事件?

Does the click reach the Bootstrap JS one more time with every click? Why does it fire the events multiple times without the .off method?

谢谢.

(我正在尝试从一本书中学习jQuery，如果那里真的有一本好本书，或者甚至是一本唯一的本书来阅读有关jQuery的内容，然后请给我拍张纸条，那里有那么多东西，而且自然而然地声称是最好的..谢谢.)

(I am trying to learn jQuery from a book, if any one out there really has a good book or even the one and only book to read about this, then please do shoot me a note, there is so many out there and all claim to be the best naturally.. thank you.)

推荐答案

为什么在没有.off方法的情况下会多次触发事件?

Why does it fire the events multiple times without the .off method?

因为每次单击元素.img-modal，您都将为show.bs.modal事件附加 新 事件侦听器.这就是为什么事件show.bs.modal每次点击都会被触发一次.

Because every time the element .img-modal is clicked, you are attaching a new event listener for the show.bs.modal event. This is why the event show.bs.modal is fired one more time on each click.

有人可以向我解释为什么在这种情况下确切需要此.off方法吗?

.off()方法仅删除先前附加的事件.

The .off() method simply removes the previously attached event(s).

您不需要使用.off()方法.

您不必为每个click事件附加事件show.bs.modal的事件侦听器，而应该为所有类.modal的元素添加一个事件侦听器:

Rather than attaching an event listener for the event show.bs.modal on each click event, you should just add a single event listener for all elements with class .modal:

此处的示例

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

在show.bs.modal事件侦听器中，this绑定到显示的.modal元素；因此，您可以确定要显示的模态.在上面的示例中，this.id将为modal-1.

Within the show.bs.modal event listener, this is bound to the .modal element that is shown; therefore you can identify which modal is displayed. In the example above, this.id will be modal-1.

这篇关于Bootstrap 3.3.2模式事件多次触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！