Twitter bootstrap Twitter引导模式多事件触发

这是一个奇怪的问题，我已经寻找了一个答案，但我找不到一个适合我的代码

编辑：这个问题发生在一个繁重的Ajax页面上，页面没有刷新，模式被重用

请注意，我的Javascript有点弱，所以我可能在处理这个问题时出错了

我发现了类似的问题和问题

两者都描述了我遇到的问题，但我只是更新了hidden上的调用视图。我不绑定到按钮事件

我定义了多个情态动词

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

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

在要显示模态的视图的$document.ready中，我调用此脚本绑定到模态“hidden”事件

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

      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();
         }

因此，在视图上有一个列表，显示选定的图像。然后打开一个模式并选择更多图像。在隐藏时，我更新调用窗体上选定的图像

一切正常

问题是：

第一次打开并关闭模式时，会触发一次“on hidden”事件。第二次打开和关闭模式时，“打开隐藏”事件是两次调用，第三次是三次调用，依此类推。 如果我对其他具有不同“隐藏”事件的事件使用模式，则隐藏事件会对新隐藏事件调用四次，对旧隐藏事件调用四次。过了一会儿，我的系统就因为所有的ajax调用而死掉了

---

我错过什么了吗？我应该如何构造代码以避免这种情况发生？

好的，我已经解决了这个问题。。。嗯，有点。希望这段代码对其他人有用

当我绑定到模态的“隐藏”事件时，每次创建它时，我只是添加另一个绑定，并对之前的所有绑定进行另一次调用

为了解决这个问题，我去掉了旧的模态声明

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

而不是它们，我动态地创建模态，因为我需要它们，就像这样，并为“隐藏”事件传入回调

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

      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();
         }

我从中获得Guid创建

---

这对我很有用。并且解决了我的问题。

您也可以使用.one而不是.on，并且您绑定的事件将只触发一次。

在上述实例中，一个将无法工作，因为我实际上需要能够多次调用该事件