4

Bootstrap モーダル ダイアログを表示するカスタム JQuery プラグインを作成するときに問題が発生します。カスタム プラグインには、パラメーターとしてコールバック関数が必要です。

問題は、モーダル ダイアログが 2 回呼び出され、コールバックも 2 回呼び出された場合などです。

ここにコード：

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/

4

2 に答える 2

14

が実行されるたびに、モーダル イベントとクリック イベントを再バインドしてい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');
    });

});
于 2013-11-14T05:05:25.963 に答える
2

on() に対して one() を呼び出すことができます。

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

ドキュメントによると：

.one() メソッドは .on() と同じですが、特定の要素とイベント タイプのハンドラーが最初の呼び出し後にバインド解除される点が異なります。例えば：

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

于 2016-08-24T22:11:41.527 に答える