Клонированные входы не выбраны

У меня есть форма, где пользователь может добавить еще несколько полей, нажав кнопку. Это сделано путем клонирования, меняя имена и apending поля на 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(); 
});

я работает, но новые поля клонирован «оригинал» не выбран, хотя они имеют один и тот же конец имени. Итак, расчет не производится, и я не понимаю, почему.

источник

2016-05-12 Keoma Borges

Просто выглядит, как вы усложнять его и все равно делает недействительный HTML разметку с повторяющимися идентификаторами. Если вы предоставляете MCVE или, по крайней мере, соответствующую разметку HTML, я думаю, кто-то может опубликовать лучший/более читаемый и поддерживаемый способ. –

Помните, что это приводит к недействительной разметке HTML, получая повторяющиеся идентификаторы: 'var linha = $ (" # linha ") .clone(); '** && **' linha.appendTo ("# bloco"); '. Тогда вы получите как минимум два элемента с одинаковым идентификатором 'linha' в DOM, что является недопустимым. Кстати, то же самое относится ко всем своим потомкам. Лучше было бы не использовать идентификаторы здесь. –

Если вы правильно поняли, это похоже на то, что ваши клонированные элементы не функционируют должным образом после создания.

При динамическом создании элементов и ожидают обработчиков событий для работы на них, вам нужно использовать функцию on() в JQuery, в отличие от 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, когда был создан событийно-обработчик.

источник

2016-05-12 13:10:10

Я был в процессе обновления синтаксиса вскоре после публикации его, реализуя одно и то же. С тех пор он был изменен. –

Вместо делегирования события вы можете просто передать 'true'' to 'clone()' метод для копирования любого связанного события или данных, включая любые из них, связанные с любыми потоками. –

Используйте событие делегации для учета элементов, которые будут созданы позже:

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

etc

источник

2016-05-12 13:12:09 Igor

Клонированные входы не выбраны

ответ

Смежные вопросы