Criar elemento dentro de elemento criado dinamicamente

[Maykel-ctba 233]

Fala galera!

 

Tenho um formulário onde as pessoas podem cadastrar seu perfil e inserir multiplos endereços.

Como não sei quantos endereços as pessoas cadastrarão, deixei livre. Tenho uma "div de endereços padrão", e conforme a necessidade, o usuário vai criando novos campos de endereço dinamicamente.

 

Para isso, usei clone() e funciona certinho!

 

HTML:

<form class="form-horizontal validar" enctype="multipart/form-data">
    <div id="divEnderecos">
        <div id="divEndereco00" class="divEndereco">
            <h4>Dados de entrega</h4>
            <div class="form-group">
                <label class="col-sm-2 control-label">CEP</label>
                <div class="col-sm-2"><input type="text" class="form-control" name="txEndereco[0][CEP]" placeholder="Digite o CEP aqui" /></div>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label"></label>
        <div class="col-sm-10">
            <a href="#" id="newAddress" class="clearfix btn btn-info">Adicionar outro endereço</a>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label"></label>
        <div class="col-sm-10">
            <button class="btn btn-primary" type="submit">Gravar</button>
        </div>
    </div>
</form>

Javascript:

// * Endereços múltiplos
$("#newAddress").click(function(){
    // * Conta quantas divs com divEndereco tem e bota esse número em um contador
    var n = $( ".divEndereco" ).length;
    if( n == 3 ){
        alert( 'Não é possível criar novos endereços. Você já está no limite de 3 endereços.' );
    }
    else{
        // * Clona e altera seu ID.
        $( "#divEndereco00" ).clone().attr( 'id', '#divEndereco0'+ n++ ).insertAfter( "#divEndereco00" );
    }
});

Mas, surgiu a necessidade de criar um botão após o <h4> criado nesse elemento clonado. Vai ser um botão para remover este endereço.

 

Preciso criar o seguinte elemento após o h4:

<a href="#" class="btn btn-sm btn-danger"><i class="fa fa-trash"></i> Remover endereço</a>

Tentei colocar após o clone o seguinte código:

$("<a href=\"#\" class=\"btn btn-sm btn-danger\"><i class=\"fa fa-trash\"></i> Remover endereço</a>").insertAfter("#divEndereco0"+n+" > h4");

Mas sem sucesso... ele não cria o elemento, mas também não dá nenhum erro.

O que posso fazer?

[Rafael Sirotheau 43]

Olá!

Tem duas coisas erradas:

1

.attr( 'id', '#divEndereco0'+ n++ )

deveria ser

.attr( 'id', 'divEndereco0'+ n++ )

explicação: do jeito que você esta fazendo, o elemento esta ficando com o atributo id="#divEndereco0x" (com o # extra)

2

.insertAfter("#divEndereco0"+n+" > h4")

deveria ser

.insertAfter("#divEndereco0"+(n-1)+" > h4");

explicação: ao fazer utilizar '#divEndereco0'+ n++ você está incrementando o valor do n. Utiliza-lo no insertAfter sem decrementar em um, ele vai buscar um elemento que ainda não existe.

[Maykel-ctba 233]

Perfeito! O n-1 eu até consegui ver por conta, mas esqueci do detalhe do # :coolio:

 

Muchas gracias!