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）;

希望这有助于您的情况。

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

3 个答案: