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

【问题标题】：prevent double click submit without disabling the button防止双击提交而不禁用按钮
【发布时间】：2017-03-24 12:32:34
【问题描述】：

我有一个使用提交按钮来查询 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);
        });
      }

有没有一种简单的方法可以防止双击这里或者我应该重写这个？

【问题讨论】：

你说你不想在使用后禁用按钮，但是为什么你不能在使用后禁用它并在getSearchDataFromApi响应后重新启用它回来了吗？

标签： jquery

【解决方案1】：

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

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

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

【讨论】：

【解决方案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() 将阻止同一元素的第二次执行事件

【讨论】：

【解决方案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);

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

【讨论】：