Question

jQuery的Ajax功能正常工作，但是当用户多次单击按钮时，插入到div <# exibeCep> 中的数据的返回重复。
我尝试使用remove()，e.preventDefault()，StopPropagation()，bind()和其他人，但没有任何事情阻止了div的重复。我发布了什么以避免重复div？

HTML：

<div id="exibeCep" class="conf_frete">
  <h1>Escolha a opção do frete</h1>
</div>

JavaScript的：

$('#buscafrete').click(function (e) {

  e.preventDefault();
  e.stopPropagation();
  cep = $('#cep').val();
  $.ajax({
    type    : 'GET',
    url     : "{% url 'get_frete' %}",
    dataType: "json",
    data    : {
      data               : cep,
      csrfmiddlewaretoken: '{{csrf_token}}',
    },
    success : function (retorno) {

      if (retorno['sedex_cod_error'] == -3 || retorno['pac_cod_error'] == -3) {
        $('<label><input type="radio" name="zipcode" id=' + 'sedex' + ' value=' + 'CEP de destino invalido' + '/>' + 'CEP de destino invalido.' + '</label>').appendTo('#exibeCep');
      } else {
        $('<label><input type="radio" name="zipcode" checked id=' + 'sedex' + ' value=' + retorno['Sedex'] + '/>' + retorno['Sedex'] + ' ( ' + 'Sedex' + ' ) ' + '</label>').appendTo('#exibeCep');
        $('<label><input type="radio" name="zipcode" id=' + 'sedex' + ' value=' + retorno['Pac'] + '/>' + retorno['Pac'] + ' ( ' + 'Pac' + ' ) ' + '</label>').appendTo('#exibeCep');
      }
    },
    error   : function (jqXHR, textStatus, errorThrown) {
      //alert("FALHOU");
      console.log('Error');
      console.log(jqXHR);
      console.log(textStatus);
      console.log(errorThrown);
    },
  });

});

Answer 1

为避免用户双击，我通常会添加一个类，例如is-loading，然后检查该类。如果它存在什么都不做并返回。然后在success中删除该课程。

示例

$('#buscafrete').click(function(e) { if($(this).hasClass('is-loading')) { // Do nothing. return; } $(this).addClass('is-loading'); $.ajax({ }, success: function(retorno){ $(this).removeClass('is-loading'); }); }

Answer 2

这不是您问题的解决方案，但这可能对您有所帮助。你可以做的是处理ajaxstart和ajaxstop方法，在那些你可以启用和禁用按钮，以便最终你限制用户点击其中...所以用户不能点击，你的数据将不会多余......

ajax正在重复我的div

2 个答案: