回调函数在引导模态上调用两次甚至更多次

Callback function called twice and more on Bootstrap Modal

本文关键字：两次 函数 模态 调用 回调      更新时间：2023-09-26

创建自定义 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>

爪哇语

(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时都会重新绑定模式和单击事件。 下面介绍了如何防止每次重新附加事件：

(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');
    });
});

你可以对 on（） 调用 one（）：

$('#general_modal .action_button').unbind().one('click', function () {

根据文档：

.one（） 方法与 .on（） 相同，只是 给定元素和事件类型在首次调用后未绑定。 例如：

http://jsfiddle.net/kJn47/47/

相关文章：