防止双击提交而不禁用按钮

Question

我有一个使用提交按钮来查询 Ajax 调用的应用程序。 现在，如果用户点击太快，它会在按钮消失之前返回重复的结果。用户可以单击搜索图标将其恢复并进行更多搜索，因此我不想在使用后禁用它。这是我提交的代码。

      function watchSubmit(){
        $('.guidebox-search-form').submit(function(event){
          $('.guidebox-search-results').empty();
          event.preventDefault();
          var query = $(this).find('.guidebox-query').val();
          getSearchDataFromApi(query, displaySearchData);
        });
      }

有没有一种简单的方法可以防止单击此处，或者我应该重写它？

Answer 1

你可以用这个来防止双重权限：

$(".guidebox-search-form").one("submit", Your function);

感谢这个(.one(提交应该只工作一次。希望对您有所帮助！

Answer 2

您可以按如下方式更改代码：

function watchSubmit(){
    $('.guidebox-search-form').submit(function(event){
      $('.guidebox-search-results').empty();
      event.preventDefault();
      var query = $(this).find('.guidebox-query').val();
      getSearchDataFromApi(query, displaySearchData);
      $(this).off(event);
    });
}

.off(( 将阻止同一元素的第二次执行事件

Answer 3

为了支持@toomanyredirects注释，单击该按钮后，您必须在执行函数时禁用该按钮。

$('.sample-button').click(function(event) {
    var oElement = $(this);
    oElement.prop('disabled', true); // disable button temporarily
    $.when(watchSubmit()).then(function(event) {
        oElement.prop('disabled', false); // enable button after method was successful.
    });
});

如果您使用的是较低版本的 jQuery，则可能需要使用以下内容： $(this(.attr('disabled'， true(; $(this(.attr('disabled'， false(;

希望这对您的情况有所帮助。