如何在处理Ajax表单时或通过jquery 2秒钟禁用单击事件

Question

我知道这个问题已经被问了100次了，但是没有任何事情对我有用。

1.）我不想使用css选项（仅禁用从光标单击按钮）

2.） off.()事件permentaly禁用click事件（或者我不知道如何使用它）

3.） prop("disable", true)函数在我的情况下不起作用。

这是我的代码：

$(".fa-thumbs-up").click(function( event ) {
// Stop form from submitting normally
    event.preventDefault();

    // Get some values from elements on the page:
    var $form = $(".like-button-form"),
    data = $form.serialize(),
    url = $form.attr( "action" );

    // Send the data using post
    var posting = $.post( url, data );

    // Put the results in a div
    posting.done(function( data ) {
    response = JSON.parse(data);
    $(form).children("input[name='likedornot']").attr("value",response.likedornot); 
    });    

});

的HTML

<form class=".like-button-form" action="sdfs.php" method="POST">
<i class="fa-thumbs-up"></i>
</form> 

Answer 1

为此，无需使用表单或输入..它足以使用data属性，并且只需完成add/removeClass的一些工作即可

下一个代码段通过使用setTimeout() 测试代码是否正常工作，单击停止，单击后必须等待3秒钟

 $(document).ready(function(){ $(document).on('click' , 'i.fa.fa-thumbs-up:not(.inprogress)' , function(e){ e.preventDefault(); var ThisThumb = $(this), GetUrl = ThisThumb.attr('href'), LikedOrNot = ThisThumb.hasClass('liked') ? '' : 'liked'; data = {likedornot : LikedOrNot}; // in sdfs.php use $_POST['likedornot'] ThisThumb.addClass('inprogress'); setTimeout(function(){ ThisThumb.removeClass('liked inprogress').addClass(LikedOrNot); } , 3000); }); }); 

 i.fa.fa-thumbs-up{ color : #333; font-size : 30px; } i.fa.fa-thumbs-up.inprogress{ color : #ccc; } i.fa.fa-thumbs-up.liked{ color : blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <i class="fa fa-thumbs-up" data-action="sdfs.php"></i> 

向其添加ajax之后的代码

 $(document).ready(function(){ $(document).on('click' , 'i.fa.fa-thumbs-up:not(.inprogress)' , function(e){ e.preventDefault(); var ThisThumb = $(this), GetUrl = ThisThumb.attr('href'), LikedOrNot = ThisThumb.hasClass('liked') ? '' : 'liked'; data = {likedornot : LikedOrNot}; // in sdfs.php use $_POST['likedornot'] ThisThumb.addClass('inprogress'); var posting = $.post( GetUrl, data ); posting.done(function(data){ ThisThumb.removeClass('liked inprogress').addClass(LikedOrNot); }); }); }); 

 i.fa.fa-thumbs-up{ color : #333; font-size : 30px; } i.fa.fa-thumbs-up.inprogress{ color : #ccc; } i.fa.fa-thumbs-up.liked{ color : blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <i class="fa fa-thumbs-up" data-action="sdfs.php"></i> 

Answer 2

var submitForm = function( event ) {
    // Stop form from submitting normally
    $(event.target).off('click');
    event.preventDefault();
    enter code here
    // Get some values from elements on the page:
    var $form = $(".like-button-form"),
    data = $form.serialize(),
    url = $form.attr( "action" );

    // Send the data using post
    var posting = $.post( url, data );

    // Put the results in a div
    posting.done(function( data ) {
        response = JSON.parse(data);
        $(form).children("input[name='likedornot']").attr("value",response.likedornot); 
        $(event.target).one('click',submitForm);
    });    

}

$(".fa-thumbs-up").one('click',submitForm);

对您的功能进行了少许更改以使用该事件。

如果要在2秒钟内执行相同操作，请使用以下方法：

var submitForm = function( event ) {
// Stop form from submitting normally
        $(event.target).off('click');
    setTimeout(function(){
        $(event.target).one('click',submitForm);
    },2000)
    event.preventDefault();

    // Get some values from elements on the page:
    var $form = $(".like-button-form"),
    data = $form.serialize(),
    url = $form.attr( "action" );

    // Send the data using post
    var posting = $.post( url, data );

    // Put the results in a div
    posting.done(function( data ) {
        response = JSON.parse(data);
                            $(form).children("input[name='likedornot']").attr("value",response.likedornot); 
    });    

}

$(".fa-thumbs-up").one('click',submitForm);