我在创建将显示 Bootstrap 模态对话框的自定义 JQuery 插件时遇到问题。自定义插件需要回调函数作为参数。
问题是模态对话框调用两次,回调也调用两次,等等。
这里是代码:
HTML
<a href="#" class="confirm_delete">test modal</a>
<div class="modal fade" id="general_modal" tabindex="-1" role="dialog" aria-labelledby="general_modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="general_modal_title">Set Title Here</h4>
</div>
<div class="modal-body">set modal content here</div>
<div class="modal-footer">
<button type="button" class="btn btn-default close_button" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary action_button">Save changes</button>
</div>
</div>
</div>
Javascript
(function ($) {
$.fn.showDialog = function (options, callback) {
$('#general_modal').modal();
$('#general_modal .action_button').on('click', function () {
callback();
});
}
}(jQuery));
$('.confirm_delete').click(function (e) {
e.preventDefault();
$(this).showDialog(null, function () {
alert('xxx');
});
});
演示:http://jsfiddle.net/kJn47/2/
最佳答案
每次运行 showDialog
时,您都会重新绑定(bind)模态和点击事件。以下是防止事件每次都重新附加的方法:
(function ($) {
$.fn.showDialog = function (options, callback) {
$('#general_modal').unbind().modal();
$('#general_modal .action_button').unbind().on('click', function () {
callback();
});
}
}(jQuery));
$('.confirm_delete').click(function (e) {
e.preventDefault();
$(this).showDialog(null, function () {
alert('xxx');
});
});
关于javascript - 在 Bootstrap Modal 上调用两次或更多次的回调函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19969896/