这是一个奇怪的问题,我已经搜索了答案,但找不到适合我的代码的答案。
编辑 : 这个问题发生在一个沉重的 Ajax 页面上,该页面没有刷新,而 Modal 正在被重用。
请注意我的 Javascript 有点弱,所以我可能错误地处理了这个问题
我发现了类似的问题 here和 here
两者都描述了我遇到的问题,但我只是更新了隐藏的调用 View 。我不绑定(bind)到按钮事件。
我定义了多个模态
<div id="modal_small" class="modal hide fade in">
</div>
<div id="modal_large" class="modal hide fade in">
</div>
我重用这些模态。因此 modal_large 会在一秒钟内显示一个创建表单,然后它会显示一个您可以从中选择的图像列表。
我使用以下脚本渲染我的模式,传递 View 以在每个实例中显示
function show_modal_large(href) {
$.get(href, function (data) {
$('#modal_large').html(data);
$('#modal_large').modal('show');
});
};
我的目标是重用这些模式。我相信这就是问题所在
在将显示模态的 View 的“$(document).ready”中,我调用此脚本来绑定(bind)到模态的“隐藏”事件
$('#modal_large').on('hidden', function () {
// Make Ajax Call - THIS WORKS
});
因此,成像您在 View 上有一个列表,显示您选择的图像。然后您打开一个模式并选择更多图像。在隐藏时,我更新调用表单上的选定图像。
每件事都很好。
问题:
我第一次打开模式并关闭它时,会触发一次“隐藏”事件。我第二次打开和关闭模式时,“隐藏”事件是两次调用,第三次是三次调用,依此类推。
如果我将模式用于其他具有不同“隐藏”事件的模式,则隐藏事件调用 四 新隐藏事件的时间和 四 旧隐藏事件的时间。不久之后,我的系统就因所有的 ajax 调用而死机。
我错过了什么吗?我应该如何构建我的代码,以免发生这种情况?
最佳答案
好的 想通了...好吧。希望此代码对其他人有用。
当我绑定(bind)到模态的“隐藏”事件时,每次创建它时,我只是添加另一个绑定(bind)和另一个调用所有以前的绑定(bind)。
所以为了克服这个问题,我摆脱了旧的模态声明
<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 创建
这对我很有用。并解决了我的问题。
关于twitter-bootstrap - Twitter Bootstrap 模态多事件触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14873109/