Jquery .one(） 函数不会阻止表单输入期间的多次点击事件

Jquery .one() function doesn't prevent multi click event during form input

本文关键字：事件 输入 表单 one 函数 Jquery      更新时间：2023-09-26

我有这样的代码：

$(document).ready(function() {
  $("#some-items").one("click", ".comment-form-gonder input", function(e) {
    e.preventDefault();
    $("body").css("cursor", "wait");
    //this part inserts user comment to the written comments below with animation.
    ...

问题是当我双击发送按钮时，评论入两次。我该如何防止这种情况？

尝试删除 preventDefault（）; 和
禁用按钮以确保 

$(this).attr('disabled', 'disabled');


var n = 0
$( "div" ).one( "click", function() {
    n++;
    if (n % 2 == 0){
        $(this).text('Foo');
    }else{
       $(this).text('Bar');
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Foo</div>

在处理程序中调用e.preventDefault(); .one()会使表单在执行第一种one('event')后无法阻止默认行为。之后，同一event将按预期提交表格。

防止使用on()提交默认表单，并使用one()执行其余操作：

$(document).ready(function(){
    $('.comment-form-gonder input[type="submit"]')
    .on('click', function(e) {
        e.preventDefault();
    })
    .one('click', function() {
        // This part executes only on first click:
        $("body").css("cursor", "wait");
        // rest of your code...
    });
});

JSFiddle

您也可以在第一次点击后disable提交输入，但在某些情况下，可能需要保持其"可点击"（例如通知用户他不能提交两次表单）。为此，您可以将点击状态存储在输入data属性中，并在以后使用该状态：

$(".comment-form-gonder input[type='submit']").on("click", function(e) {
    e.preventDefault();
    if($(this).data('clicked') == 'clicked'){
        return alert('already submitted!');
    }
    // This part executes only on first click:
    $(this).data('clicked', 'clicked');
    $("body").css("cursor", "wait");
    // rest of your code...
});

JSFiddle

相关文章：