Question

这是一个奇怪的问题，我搜索了一个答案，但我找不到适合我代码的答案。

编辑：此问题发生在重型Ajax页面上，页面未刷新且Modal正在重复使用。

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

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

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

我定义了多个模态

    <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”中，我将此脚本称为绑定到模态的“隐藏”事件

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

因此，您可以在显示所选图像的视图上找到一个列表。然后打开一个模态并选择更多图像。在隐藏i上更新呼叫表单上的所选图像。

每件事都很好。

问题：

第一次打开模态并关闭它时，'on hidden'事件被触发一次。第二次打开和关闭模态时，'on hidden'事件被调用两次，第三次三次调用，依此类推。如果我使用不同的“隐藏”事件将模态用于其他内容，则隐藏事件会为新隐藏事件调用四次次，而四次次调用旧的隐藏事件。过了一会儿，我的系统就死了所有的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 question here

获得了Guid创作

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

Answer 2

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

Twitter Bootstrap Modal多事件触发

2 个答案: