Twitter Bootstrap Modal多事件触发

Question

这是一个奇怪的问题,我已经搜索了一个答案,但我找不到一个适合我的代码.

编辑:此问题发生在一个沉重的Ajax页面上,页面没有刷新,Modal正在被重用.

请注意我的Javascript有点弱,所以我可能接近这个问题

我在这里和这里发现了类似的问题

两者都描述了我遇到的问题,但我只是更新了隐藏的调用视图.我没有绑定到按钮事件.

我定义了多个模态

    <div id="modal_small" class="modal hide fade in">
    </div>
    <div id="modal_large" class="modal hide fade in">
    </div>

我重用这些模态.因此modal_large会在一秒钟后显示一个Create Form,然后显示一个可以从中选择的图像列表.

我使用以下脚本渲染我的模态,在视图中传递以在每个实例中显示

        function show_modal_large(href) {
            $.get(href, function (data) {
                $('#modal_large').html(data);
                $('#modal_large').modal('show');
            });
        };

我的目标是重用这些模态.这就是我相信的问题所在

在将要显示模态的视图的"$(document).ready"中,我将此脚本称为绑定到模态的"隐藏"事件

    $('#modal_large').on('hidden', function () {
               // Make Ajax Call - THIS WORKS
    });

因此,您可以在显示所选图像的视图上进行成像.然后打开一个模态并选择更多图像.在隐藏i上更新呼叫表单上的所选图像.

一切都很好.

问题:

第一次打开模态并关闭它时,'on hidden'事件被触发一次.第二次打开和关闭模态时,'on hidden'事件是两次调用,第三次是三次调用,依此类推.如果我去,并且使用模式的其他具有不同的"隐藏"事件隐藏的事件是某事物4周为新的隐藏事件时间,以及四个次旧隐藏事件.过了一会儿,我的系统就死了所有的ajax调用.

我错过了什么吗？我应该如何构建我的代码,这样就不会发生？

Answer 1

好的想出来......好吧.希望此代码对其他人有用.

由于我绑定了模态的"隐藏"事件,每次创建时我只是添加了另一个绑定,并且还调用了所有以前的绑定.

所以为了过来这个我摆脱了旧的模态声明

<div id="modal_small" class="modal hide fade in">
</div>
<div id="modal_large" class="modal hide fade in">
</div>

而不是他们,我动态创建模态,因为我需要它们,并传递回"隐藏"事件

      function show_modal_large(href, callback) {
             // create guid to name of this Modal
             var randomNum = guid();
             // create element with guid id
             var elementName = '#' + randomNum.toString();
             $('body').append("<div id=" + randomNum + " class='modal hide fade in'></div>");
             // create Modal and show
             $.get(href, function (data) {
                 $(elementName).html(data);
                 // register call back to 'hidden' event
                 $(elementName).on('hidden', function () {
                     callback();
                     // clean up after hidden
                     $(elementName).unbind();
                     $(elementName).remove();
                 });
                 $(elementName).modal('show');
             });
         };

         function s4() {
             return Math.floor((1 + Math.random()) * 0x10000)
                        .toString(16)
                        .substring(1);
         };

         function guid() {
             return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
                    s4() + '-' + s4() + s4() + s4();
         }

我在这里得到了Stackoverflow问题的Guid创建

这对我很有用.并解决我的问题.

Answer 2

您也可以使用.one而不是.on,您绑定的事件只会触发一次.