Botões criados com clone() não executam.

[rockrgo 138]

Boa tarde pessoal,

 

tenho a seguinte estrutura que ao clicar em um botão adicionar ela é clonada com a função clone().

                                       <div class="condutorAdicional">
                                            <div class="form-group">
                                                <label class="control-label">
                                                     Dirige o veiculo?
                                                </label>
                                                <div class="col-lg-12 form-control-static">
                                                    <div class="select-custom">
                                                        <select name="condutorAdicionalDirige[]" class="input-medium form-control required" >
                                                            <option value="">(Selecione)</option>
                                                            <option value="3">Não dirige ou dirige 1 dia por Semana</option>
                                                            <option value="1">Dirige 2 ou mais dias por semana</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label class="control-label">
                                                    Nome completo
                                                    <i class="help" data-container="body" data-toggle="popover" data-content="Informe o seu nome conforme consta no CPF">?</i>
                                                </label>
                                                <div class="col-lg-12 form-control-static">
                                                    <input type="text" name="condutorAdicionalNome[]" class="form-control required alphanumspace" maxlength="100" />
                                                </div>
                                            </div>

                                            

                                            <div class="form-group">
                                                <label class="control-label">
                                                    Sexo
                                                </label>
                                                <div class="col-lg-12 form-control-static">
                                                    <input type="radio" name="condutorAdicionalSexo[]" id="condutorAdicionalSexoM" value="M" /><label for="condutorAdicionalSexoM"><span></span>Masculino</label>
                                                    <input type="radio" name="condutorAdicionalSexo[]" id="condutorAdicionalSexoF" value="F" /><label for="condutorAdicionalSexoF"><span></span>Feminino</label>
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label class="control-label">
                                                    Data Nascimento
                                                </label>
                                                <div class="col-lg-12 form-control-static ">
                                                    <input type="text" name="condutorAdicionalDataNascimento[]" class="mData input-medium form-control required data1725"  />
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label class="control-label">
                                                    Tempo de Habilitação
                                                    <i class="help" data-container="body" data-toggle="popover" data-content="Caso o tempo seja inferior a 1 ano, por favor indique um ano">?</i>
                                                </label>
                                                <div class="col-lg-12 form-control-static">
                                                    <input type="number" name="condutorAdicionalTempoHabilitacao[]" class="input-medium form-control required" min="0" maxlength="2" />
                                                </div>
                                            </div>
                                            <button type="button" class="botao btn-padrao remove margin-left"><i></i> remover o condutor</button>
                                        </div>

no final desta estrutura tem um botão utilizado para excluir a estrutura em que o botão faz parte.

 

O problema é que quando tento excluir as estruturas clonadas o botão não executa a função de excluir, a função só é executada uma única vez na estrutura original.

 

a função que exclui é esta.

            //Este código remove o condutor adicional
            $('button.remove').on('click', this, function(e){
                    e.preventDefault(); 
                    
                    var numCondutorAdicional = $('.condutorAdicional:visible').length;

                    if(numCondutorAdicional === 1){                        
                            $(this).parent('.condutorAdicional').parent().css('display','none');

                    }else{                        
                            $(this).parent('.condutorAdicional').remove();
                            $('#btnAddCondutor').css('display','block');

                    }
                  
            });

 

[Lucas Guima 164]

Mostre o código do seu .clone().

[rockrgo 138]

var condutorAdicional = $('.condutorAdicional:first-child').clone();

$('.condutorAdicional').parent().css('display','block').append(condutorAdicional);

[Lucas Guima 164]

Dá uma olhada na documentação do .clone(), ele tem parâmetros que dizem respeito aos eventos.

[rockrgo 138]

já tentei usar estes parâmetros, se eu usar

clone(true)

ele clona e excluí, porém se digito algo nos campos do clone ele aparece na estrutura original.

[Lucas Guima 164]

Bom, eu nem conhecia esses parâmetros, testei aqui para confirmar e funcionou.

[rockrgo 138]

posta o código que vc testou aí para ver se consigo usar aqui!

[William Bruno 1501]

É só usar o on no estilo delegate.

$('#container_tal').on('click', 'button.remove', function(e){

Não precisa fazer nada com o clone não. Delegate é mais legal =)

[Lucas Guima 164]

Tinha testado com um outro, agora com o seu código:

http://jsfiddle.net/LucasGuima/yDmB5/

 

E com o do William:

http://jsfiddle.net/LucasGuima/yDmB5/2/

 

Ambos funcionando.

[rockrgo 138]

Desta forma não funcionou não willian. O modo que funciona a exclusão é passando true no clone mesmo, o problema da informação digitada aparecer na estrutura original está ocorrendo em um único campo onde utilizo uma mascara de data.

 

 

Funcionou sim willian!!.

 

 

 

só uma dúvida, neste estilo delegate tenho que passar sempre um id?pois tentei passar uma class e não funcionou.

exemplo:

$(".class").on("click","button", etc...

só não copiou a mascara do campo date.

[William Bruno 1501]

Pode ser classe sim, mas o elemento da classe precisa já existir no DOM, e não ser um dos elementos que vc clonou(inseriu dinâmicamente)

[rockrgo 138]

Pode ser classe sim, mas o elemento da classe precisa já existir no DOM, e não ser um dos elementos que vc clonou(inseriu dinâmicamente)

 

Entendi...obrigado!

 

Valeu Willian e Lucas !!!