CODEWITHSUNDEEP
javascriptjquery
Keoma Borges
Keoma Borges

Reputation: 694

Cloned inputs are not selected

I have a form where the user can add some more fields by clicking a button. It's made by cloning, changing the names, and apending the fields on the div: 

$("#add").click(function(){
    var linha = $("#linha").clone();

    var num = $("#cont").val();
    var novo = parseInt(num) + 1;
    novo = novo.toString();

    linha.find('#FaturamentoHoraExtra'+num+'Nome').attr({'name': 'data[FaturamentoHoraExtra]['+novo+'][nome]'});
    linha.find('#FaturamentoHoraExtra'+num+'Nome').val('');
    linha.find('#FaturamentoHoraExtra'+num+'Responsabilidade').attr({'name': 'data[FaturamentoHoraExtra]['+novo+'][responsabilidade]'});
    linha.find('#FaturamentoHoraExtra'+num+'Responsabilidade').removeAttr("selected");
    linha.find('#FaturamentoHoraExtra'+num+'MaodeobraId').attr({'name': 'data[FaturamentoHoraExtra]['+novo+'][responsabilidade]'});
    linha.find('#FaturamentoHoraExtra'+num+'MaodeobraId').removeAttr("selected");
    linha.find('#FaturamentoHoraExtra'+num+'Salario').attr({'name': 'data[FaturamentoHoraExtra]['+novo+'][salario]'});
    linha.find('#FaturamentoHoraExtra'+num+'Salario').val('');
    linha.find('#FaturamentoHoraExtra'+num+'Qtd50').attr({'name': 'data[FaturamentoHoraExtra]['+novo+'][qtd_50]'});
    linha.find('#FaturamentoHoraExtra'+num+'Qtd50').val('');
    linha.find('#FaturamentoHoraExtra'+num+'Valor50').attr({'name': 'data[FaturamentoHoraExtra]['+novo+'][valor_50]'});
    linha.find('#FaturamentoHoraExtra'+num+'Valor50').val('');
    linha.find('#FaturamentoHoraExtra'+num+'Qtd100').attr({'name': 'data[FaturamentoHoraExtra]['+novo+'][qtd_100]'});
    linha.find('#FaturamentoHoraExtra'+num+'Qtd100').val('');
    linha.find('#FaturamentoHoraExtra'+num+'Valor100').attr({'name': 'data[FaturamentoHoraExtra]['+novo+'][valor_100]'});
    linha.find('#FaturamentoHoraExtra'+num+'Valor100').val('');
    linha.find('#FaturamentoHoraExtra'+num+'Dsr').attr({'name': 'data[FaturamentoHoraExtra]['+novo+'][dsr]'});
    linha.find('#FaturamentoHoraExtra'+num+'Dsr').val('');
    linha.find('#FaturamentoHoraExtra'+num+'Total').attr({'name': 'data[FaturamentoHoraExtra]['+novo+'][total]'});
    linha.find('#FaturamentoHoraExtra'+num+'Total').val('');
    linha.find('#FaturamentoHoraExtra'+num+'Obs').attr({'name': 'data[FaturamentoHoraExtra]['+novo+'][obs]'});
    linha.find('#FaturamentoHoraExtra'+num+'Obs').val('');

    linha.appendTo("#bloco");

    $("#cont").val(novo);

    return false;
});

All the fields are automatically calculated by some functions. This is how I made this:

$("input[name$='[dsr]']").change(function(){
    somaColaborador();
    totalDsr();
    totalGeral();
});
$("input[name$='[valor_50]']").change(function(){
    total50();
    somaColaborador();
    totalDsr();
    totalGeral();
});
$("input[name$='[valor_100]']").change(function(){
    total100();
    somaColaborador();
    totalDsr();
    totalGeral();
});
$("input[name$='[porcentagem]']").change(function(){
    porcentagemRateio();
});

I works, but the new fields cloned by the "original" are not selected, although they have the same end name. So, the calculation is not made and I'm not understanding why.

Upvotes: 0

Views: 32

Answers (2)

Rion Williams
Rion Williams

Reputation: 76547

If I understand you correctly, it sounds like your cloned elements aren't functioning as expected after creation.

When dynamically creating elements and expecting the event handlers to work for them, you'll need to use the on() function in jQuery as opposed to click() which will target elements that exist presently and those that are created in the future :

$(document).on('change','input[name$="[dsr]"]',function(){
    somaColaborador();
    totalDsr();
    totalGeral();
});
$(document).on('change','input[name$="[valor_50]"]',function(){
    total50();
    somaColaborador();
    totalDsr();
    totalGeral();
});
$(document).on('change','input[name$="[valor_100]"]',function(){
    total100();
    somaColaborador();
    totalDsr();
    totalGeral();
});
$(document).on('change','input[name$="[porcentagem]"]',function(){
    porcentagemRateio();
});

The click() function would only wire up these event handlers to work for elements that existed in the DOM when the event-handler was created.

Upvotes: 1

Igor
Igor

Reputation: 15893

Use event delegation to account for elements that will be created later:

$(document).on("change", "input[name$='[dsr]']", function(){
  ...
});

etc

Upvotes: 1

Related Questions