Em vez de usar métodos JavaScript, use o .on()
do jQuery nos eventos. Por exemplo, em vez de usar:
var bairro = document.querySelector('#bairro');
var paragrafobairro = document.querySelector('#paragrafobairro');
bairro.addEventListener('keyup', function () {
paragrafobairro.innerHTML = "<div align='left' style='padding: 10px'><strong>Bairro:</strong> <br>" + bairro.value + "</div>";
});
Use:
var bairro = $('#bairro');
var paragrafobairro = $('#paragrafobairro');
bairro.on('keyup', function () {
paragrafobairro.html("<div align='left' style='padding: 10px'><strong>Bairro:</strong> <br>" + bairro.val() + "</div>");
});
Nem precisa criar variáveis, pode usar assim:
$('#bairro').on('keyup', function () {
$('#paragrafobairro').html("<div align='left' style='padding: 10px'><strong>Bairro:</strong> <br>" + $('#bairro')this.val()value + "</div>");
});
E após o AJAX do CEP se processado, dispare o evento keyup
com .trigger("keyup")
em todos os campos que vão para a div:
$("#endereco, #bairro, #cidade, #uf, #ibge"#uf").trigger("keyup");
Ficando assim:
if (!("erro" in dados)) {
//Atualiza os campos com os valores da consulta.
$("#endereco").val(dados.logradouro);
$("#bairro").val(dados.bairro);
$("#cidade").val(dados.localidade);
$("#uf").val(dados.uf);
$("#ibge").val(dados.ibge);
$("#endereco, #bairro, #cidade, #uf, #ibge"#uf").trigger("keyup");
} //end if.
else {
//CEP pesquisado não foi encontrado.
limpa_formulário_cep();
alert("CEP não encontrado.");
}