Depois de clonar uma section inteira, o select com select2 não funciona mais. Já tentei usar o destroy pra depois usar o select2 no JS mas não funciona. Alguém pode me ajudar? Seria de grande valia. Obrigado.
O elemento que eu clonei é uma section inteira, mas não está dando pra colocar aqui no editor do Stack Overflow. Então, antes dessa div que inicia o HTML tem uma section.
HTML
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label class="form-label">Telefone Principal</label>
<input class="form-control clt fone"
name="cltFone1"
type="text">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label class="form-label">Telefone Secundário</label>
<input class="form-control clt fone"
name="cltFone2"
type="text">
</div>
</div>
</div>
<div class="cltInfoHide">
<div class="row">
<div class="col-lg-5">
<div class="form-group">
<label class="form-label">CPF</label>
<input class="form-control cpf clt"
name="cltCpf"
type="text">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="form-group">
<label>UF</label>
<select class="select2" name="cltUf">
<option value="" selected disabled>Estado</option>
<option value="1">Acre</option>
<option value="2">Alagoas</option>
<option value="3">Amazonas</option>
<option value="4">Amapá</option>
<option value="5">Bahia</option>
<option value="6">Ceará</option>
<option value="7">Distrito Federal</option>
<option value="8">Espírito Santo</option>
<option value="9">Goiás</option>
<option value="10">Maranhão</option>
<option value="12">Mato Grosso do Sul</option>
<option value="13">Mato Grosso</option>
<option value="11">Minas Gerais</option>
<option value="14">Pará</option>
<option value="15">Paraíba</option>
<option value="18">Paraná</option>
<option value="16">Pernambuco</option>
<option value="17">Piauí</option>
<option value="19">Rio de Janeiro</option>
<option value="20">Rio Grande do Norte</option>
<option value="23">Rio Grande do Sul</option>
<option value="21">Rondônia</option>
<option value="22">Roraima</option>
<option value="24">Santa Catarina</option>
<option value="26">São Paulo</option>
<option value="25">Sergipe</option>
<option value="27">Tocantins</option>
</select>
</div>
</div>
<div class="col-lg-9">
<div class="form-group">
<label>Cidade</label>
<select class="select2" name="cltCidade" disabled>
<option value="" selected disabled>Cidade</option>
</select>
</div>
</div>
</div>
JS
$(document).on('click', '.cltAdd', function() {
//loop through each input
var section = $('.cltSection:first').clone(true).find("input[name='cltNome[]']").each(function(){
$(this).closest("section").find(".cltTrash").click();
$(this).closest("section").find("input[name='cltFone1']").mask("destroy").mask('(00) 00000-0000');
$(this).closest("section").find("input[name='cltFone2']").mask("destroy").mask('(00) 00000-0000');
$(this).closest("section").find("input[name='cltCpf']").mask("destroy").mask('000.000.000-00');
$(this).typeahead({
input: "input[name='cltNome[]']",
order: "asc",
minLength: 1,
display: ["nome"],
source: {
partes: {
ajax: {
url: "modules/onelex/php/autocomplete_partes.php"
}
}
}
,
callback: {
onClick: function (node, a, item, event) {
var parte = item.id;
node.closest("section").find(".clt").prop("readonly", true);
node.closest("section").find(".cltLoad").show();
node.closest("section").find(".cltFind").hide();
$.getJSON("modules/onelex/php/parte.php?valor="+parte, function (dados){
if (dados.length > 0) {
$.each(dados, function(i, obj){
fone1 = obj.fone1;
fone2 = obj.fone2;
email = obj.email;
cpf = obj.cpf;
rg = obj.rg;
emissor = obj.emissor;
endereco = obj.endereco;
bairro = obj.bairro;
numero = obj.numero;
complemento = obj.complemento;
uf = obj.uf;
cidade = obj.cidade;
})
node.closest("section").find(".clt").prop("readonly", false);
node.closest("section").find("input[name='cltNome[]']").prop("readonly", true);
node.closest("section").find(".cltTrash").show();
node.closest("section").find(".cltLoad").hide();
node.closest("section").find(".cltFind").show().css("color","green");
} else {
node.closest("section").find(".clt").prop("readonly", false);
node.closest("section").find(".cltLoad").hide();
node.closest("section").find(".cltFind").show().text("\u2219 Erro ao localizar cliente").css("color","red");
}
node.closest("section").find("input[name='cltFone1']").val(fone1);
node.closest("section").find("input[name='cltFone2']").val(fone2);
node.closest("section").find("input[name='cltEmail']").val(email);
node.closest("section").find("input[name='cltCpf']").val(cpf);
node.closest("section").find("input[name='cltRg']").val(rg);
node.closest("section").find("input[name='cltEmissor']").val(emissor);
node.closest("section").find("input[name='cltEndereco']").val(endereco);
node.closest("section").find("input[name='cltBairro']").val(bairro);
node.closest("section").find("input[name='cltNumero']").val(numero);
node.closest("section").find("input[name='cltComplemento']").val(complemento);
node.closest("section").find("select[name='cltUf']").val(uf).change();
setTimeout(function(){
node.closest("section").find("select[name='cltCidade']").val(cidade).change();
}, 3000);
})
}
},
cancelButton: false
});
}).end()
.insertAfter('.cltSection:last');
});
Já tentei colocar o
$(".select2").select2();mas não funciona.` Quando faço o descrito acima acontece o seguinte erro em imagens:
1 - Clico em "Adicionar Cliente"
2 - Aparecem dois selects na section que eu clonei. As duas funcionam iguais, ou seja, quando clico em uma a outra imita o valor. E a de baixo que foi adicionada não funciona nada, nem da pra clicar.
Já tentei inclusive colocar com o nome do select assim:
$(this).closest("section").find("select[name='cltUf']").select2();Mas também não funciona. Já tentei usar o destroy pra depois chamar de novo a função assim:
$(this).closest("section").find("select[name='cltUf']").select2("destroy").select2();
Mas também não funciona. Não sei o que pode ser. Acho que o problema não está sendo no select em si. Mas sim na hora de clonar a Section.
Desde já agradeço aqueles que tentaram me ajudar aqui. Ainda não tenho a solução. Quando descobrir eu posto aqui. Obrigado.
.insertAfter('.cltSection:last');
adicione essa linha$(".select2").select2();