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

如果我理解正确，听起来你的克隆元素在创建后没有按预期运行。

当动态创建元素并期望事件处理程序为它们工作时，你需要在jQuery中使用on()函数，而不是click()，它将定位目前存在的元素和那些是在未来创建的：

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

click()函数只会连接这些事件处理程序，以便在创建事件处理程序时为DOM中存在的元素工作。

Answer 2

使用事件委派来考虑稍后将创建的元素：

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

etc

未选择克隆的输入

2 个答案: