A função $.ajax
está funcionando corretamente, mas o retorno dos dados que estão sendo inseridos dentro da div <#exibeCep> está sendo duplicando quando o usuario clica varias vezes no botão. Tentei usar .remove()
, e.preventDefault();
, stopPropagation();
, bind()
e outros, mas nada evitou a duplicidade da div
.
O que posso colocar para evitar a duplicação da div ?
<div id="exibeCep" class="conf_frete"> <h1>Escolha a opção do frete</h1> </div>
$('#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);
},
});
});