0

ボタンがあります

<span class="btn btn-primary" id="open-label"><i class="icon-plus icon-white"></i> Add label</span>

モーダルウィンドウを開く ( http://twitter.github.com/bootstrap/javascript.html#modals )

<div id="ajax-labels"></div>

<div id="labels-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
         <h3 id="header">Add label</h3>
    </div>
    <div class="modal-body">
        <div class="control-group">
            <label class="control-label" for="name">Name</label>
            <div class="controls">
                <input type="text" id="name">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="color">Color</label>
            <div class="controls">
                <input type="text" id="color" name="color" value="#a5f3d4" size="6" class="iColorPicker" />
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="submit" class="btn btn-primary" id="submit-label"><i class="icon-ok icon-white"></i> Add label</button>
    </div>
</div>

<script>

function append_labels() {
    $("#ajax-labels").empty();
    $.ajax({
        url: "/ajax",
        type: "POST",
        cache: false,
        data: {
            type: "get_labels"
        },
        success: function (html) {
            labels = $.parseJSON(html);
            $.each(labels, function () {
                $("#ajax-labels").append('<span class="label" id="' + this.id + '" style="background-color: ' + this.color + '">' + this.name + '<i id="edit-label" class="icon-pencil icon-white"></i></span>   ');
            });
        }
    });
}

$('span#open-label').click(function () {
    $('#labels-modal').modal('show');
    $('#labels-modal #submit-label').click(function () {
        $('#labels-modal #submit-label').prop('disabled', true);

        var name = $('#labels-modal #name').val().trim();
        var color = $('#labels-modal #color').val().trim();

        if (name != '' || color != '') {
            $.ajax({
                url: "/ajax",
                type: "POST",
                cache: false,
                data: {
                    type: "add_label",
                    name: name,
                    color: color
                },
                success: function () {
                    $('#labels-modal').modal('hide');
                    append_labels();
                }
            });
        } else {
            return false;
        }
    });
});

</script>

ラベルを入力した後、ユーザーは [ラベルを追加] をクリックし、jquery はリクエストを送信し、送信後、スクリプトを閉じてモーダルを表示し、(ajax で) ラベル リストを更新します。質問 - ユーザーが [ラベルの追加] をすばやくクリックすると、スクリプトがフォームを繰り返し送信し、データベースで応答が 2 倍になります。どうすればこれを防ぐことができますか?

4

3 に答える 3

1

1つ使ってみてください

$('span#open-label').one('click', function () { //...

これにより、モーダル/ajax 関数が 1 回だけ実行されることが保証されます。

于 2013-02-18T20:26:26.353 に答える
0

これをクリックハンドラーに追加します

$('span#open-label').click(function () {

  if( ($(this).attr('clicked') == '1') ) { 
    /* do something else then */ 
    return;
  }
  $(this).attr('clicked', '1');

  $('#labels-modal').modal('show');

これにより、次にクリックしたときにアラートを表示できます。

「オープンラベル」を「再アクティブ化」したい場合は、次のようにします。

 $('span#open-label').attr('clicked', '0');
于 2013-02-18T20:39:14.673 に答える
0

UI で追加のクリックが許可されないように、最初のクリックでフォームとボタンを無効にします。これは手動で行うか、jQuery Block UI pluginを使用して行うことができます。

これを行う方法に関する別の投稿は次のとおりです。jqueryはフォーム送信時に送信ボタンを無効にします

編集：

クリック ハンドラー内でイベント ハンドラーを定義しています。したがって、jQuery が行っているのは、含まれているクリックが発生するたびにそのイベント ハンドラーを割り当てることです。したがって、最上位のクリックが実行された回数に応じて、AJAX 呼び出しが発生する回数が決まります。ボタンを 1 回クリックするだけですが、以前のクリックが原因です。そのクリック ハンドラー定義を他の外部に抽出すると、準備完了です。

$('span#open-label').click(function () {
    $('#labels-modal').modal('show');
});

$('#labels-modal #submit-label').click(function () {
    $('#labels-modal #submit-label').prop('disabled', true);

    var name = $('#labels-modal #name').val().trim();
    var color = $('#labels-modal #color').val().trim();

    if (name != '' || color != '') {
        $.ajax({
            url: "/ajax",
            type: "POST",
            cache: false,
            data: {
                type: "add_label",
                name: name,
                color: color
            },
            success: function () {
                $('#labels-modal').modal('hide');
                append_labels();
            }
        });
    } else {
        return false;
    }
});
于 2013-02-18T20:13:10.760 に答える