在克隆jquery之后,Select2无法正常工作

时间:2017-11-10 06:09:52

标签: javascript jquery html jquery-select2

克隆整个部分后。选择select2.js不起作用。我已经尝试了破坏,然后重新组装元素,但它仍然无法正常工作。如果有人可以帮助我,我很感激。

EmPortuguês: Depois de clonar uma section inteira,o select comselect2nãofuncionamais。 Játenteiusar o destroy pra depois usar o select2 no JSmasnãofunciona。 Alguémpode me ajudar? Seria de grande valia。 Obrigado。

这是我的代码。 感谢

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>

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');
});

0 个答案:

没有答案