Twitter Bootstrap 模态框多次触发事件问题

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 先显示创建表单一秒钟，然后显示你可以从中选择图像的列表。

我使用以下脚本呈现我的模态框，在每个实例中传递要显示的视图。

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

我的目标是重复使用这些模态框，我认为问题出在这里。在将要显示模态框的视图的"$(document).ready"中，我调用此脚本来绑定到模态框的'hidden'事件。

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

假设你在一个视图上展示了一个图片列表。你打开一个模态框并选择更多的图片。在隐藏时，我会在调用表单上更新所选的图片。

一切都很好。

问题：

第一次打开并关闭模态框时，“on hidden”事件会触发一次。第二次打开并关闭模态框时，“on hidden”事件会被调用两次，第三次调用三次，以此类推。如果我去使用具有不同“hidden”事件的模态框进行其他操作，则新的“hidden”事件将调用四次，并且旧的“hidden”事件也将调用四次。过了一会儿，我的系统就会死机，所有的ajax调用都失效了。 我是否遗漏了什么？我应该如何构建代码，以使这种情况不会发生？

- KevDevMan

Answer 1

好的，我弄清楚了……或者说有点明白了。希望这段代码能对其他人有所帮助。

因为我绑定到了模态框的“hidden”事件上，每次创建时都会添加一个新的绑定，并调用所有之前绑定的内容。

为了解决这个问题，我摒弃了旧的模态框声明。

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

我不再使用静态创建模态框的方式，而是根据需要动态创建它们，并传入“hidden”事件的回调函数。

      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创建的代码。这对我非常有帮助，解决了我的问题。

- KevDevMan

Answer 2

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

- TGardner

---

在上述情况下，一个不起作用，因为我实际上需要能够多次调用事件。 - KevDevMan