Question

我有一个按钮

<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上）标签列表。问题 - 如果用户快速点击“添加标签”，脚本重复发送表单，我在数据库中响应双打。我怎么能阻止这个？

Answer 1

尝试使用one

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

这将保证你的modal / ajax函数只执行一次。

Answer 2

首次点击时停用表单和按钮，以便UI不允许其他点击。您可以手动执行此操作，也可以使用jQuery Block UI plugin。

以下是关于如何执行此操作的另一篇文章：jquery disable submit button on form submission

修改

您正在单击处理程序中定义事件处理程序。所以jQuery正在做的是每次触发包含的点击时分配该事件处理程序。因此，根据执行顶级点击的次数，将是您的AJAX调用将触发的次数。即使只点击一下按钮，之前的点击也是罪魁祸首。将点击处理程序定义提取到另一个之外，你应该好好去。

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

Answer 3

将此添加到点击处理程序

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

如何防止重复发送ajax jQuery？

3 个答案: