Jquery Bootstrap 3.3.2模式事件多次触发

多次开火，或者说总是比之前多开火一次。我将模态事件包装在一个click函数中，该函数现在返回模态id

如何确保事件始终只触发一次，并且仅在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');

    });    

});

默认引导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 -->

关闭&次；
情态标题

我确实看了一下 这似乎可以通过

.off

方法实现

因此，在本例中，使用

$（modalIdClicked）.off（）.on（'show.bs.modal'，函数（event）{

）实现了这个技巧

有人能给我解释一下为什么在这种情况下需要这个

.off

方法吗？我很难理解点击是如何传递的

单击是否会在每次单击时再次到达引导JS？为什么它会在没有

.off

方法的情况下多次触发事件

多谢各位

（我正试图从一本书中学习jQuery，如果有人真的有一本好的书，或者甚至是唯一一本关于这本书的书，那么请给我一张便条，外面有这么多人，他们都声称自己是最好的。谢谢。）

为什么它不使用

.off

方法多次触发事件

因为每次单击元素

.img modal

时，都会为

show.bs.modal

事件附加一个新的事件侦听器。这就是为什么每次单击时会再次触发事件

show.bs.modal

有人能给我解释一下为什么在这种情况下需要这个

.off

方法吗

.off（）

方法只是删除以前附加的事件

---

您不需要使用

.off（）

方法

您不应该在每个单击事件上为事件

show.bs.modal

附加一个事件侦听器，而应该只为类为

.modal

的所有元素添加一个事件侦听器：

在

show.bs.modal

事件侦听器中，

此

绑定到所显示的

.modal

元素；因此您可以识别显示的是哪种模式。在上面的示例中，

此.id

将是

modal-1

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

---

在我的情况下，我面临多个远程加载。“.off（）'帮助我将以前绑定的事件解除与目标模式的绑定。

非常好的解释，特别感谢你给出了答案的第二部分！！我将不得不在这一部分思考一些事情。让单击侦听器在

.img modal

上查找单击的模式，还包括带子对象遍历dom等等。这改变了很多，如果不是我最初计划对模态事件所做的一切的话。谢谢你，谢谢你&谢谢你！自学还是按书/学校？如果按书，请选择哪一个？最后一次，谢谢你的详细解释！！@lowtechsun不客气--很高兴它有帮助。回答你的问题，我是自学的。堆栈溢出有praCTIC教会了我所知道的一切。我开始回答问题时没有太多的知识/经验；但在1338年的回答之后，我学到了一些东西；）对于核心JavaScript，我强烈推荐（这是一本沉重/深入的阅读）。该网站也很优秀。。我没有读过任何关于jQuery的书，我主要是指。你解释得很好，它帮助我解决了我的问题。每天从堆栈溢出中学习新东西。在我的情况下，不得不推迟“.off（）”，因为相同的模式是从不同的地方加载的。谢谢你的回答！$（'.detail_status'）。on（'change'，function（）{'content here'}）；运行了好几次..关闭了。谢谢。

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