javascript - 在 Bootstrap Modal 上调用两次或更多次的回调函数

标签 javascript jquery twitter-bootstrap modal-dialog

我在创建将显示 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">&times;</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/

相关文章:

php - 上传3.0的问题

javascript - 单击菜单时覆盖(并删除边框)

jquery - 如何在 Bootstrap 选择控件中设置文本的垂直对齐方式?

javascript - 该功能没有发出警报

javascript - 使用highlight.js 进行语法高亮显示时,相关性的良好阈值是多少?

javascript - 带有 json 的 Jquery 自动完成失败

javascript - jquery 函数原型(prototype)

jquery - 如何更改 Bootstrap slider 中的动画

javascript - 在html中使用Bootstrap和KendoUI时正确的引用顺序和要引用的文件?

javascript - 如何在 Safari 提交表单之前执行 JQuery