複製された入力が選択されていません

Question

ボタンをクリックしてさらにフィールドを追加できるフォームがあります。これは、複製、名前の変更、および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; 
}); 

すべてのフィールドは、一部の機能によって自動的に計算されます。これは私がこれを作った方法です。

$("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(); 
}); 

私は動作しますが、クローン化されたことにより、新しいフィールドは、同じエンド名を持っているものの、「オリジナル」、選択されていません。だから、計算は行われず、なぜ私は理解していない。

Answer 1

私が正しく理解していれば、クローンされた要素が作成後に正常に機能していないように思えます。

動的要素を作成し、彼らのために動作するようにイベントハンドラを期待するとき、あなたはclick()とは対照的に、現在存在する要素と、将来的に作成されたものを対象となるjQueryのでon()機能を使用する必要があります：

$(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(); 
}); 

関数は、イベントハンドラが作成されたときにDOM内に存在していた要素に対してのみ機能するようにこれらのイベントハンドラを配線します。

Answer 2

使用イベントの代表団は、後に作成される要素を考慮するため：あなたはそれを過度に複雑とにかく重複したIDが無効なHTMLマークアップをレンダリングしているよう

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

etc