Проблемы с клонированными полями с функцией javascript

Question

У меня проблемы с функцией javascript в клонированном поле.

Это мой JS код:

$("a#add").click(function(){ 
    $('<fieldset class="articulos" id="'+ i +'"><input name="articulo[' + i + '][nombre]" id="art_nombre" value="" /><input name="articulo[' + i + '][cantidad]" class="art_cantidad" value="" /><input name="articulo[' + i + '][preciou]" class="art_preciou" value="" /><input name="articulo[' + i + '][descuento]" class="art_desc" value="" /><input name="articulo[' + i + '][precio]" class="art_precio" value="" /></fieldset> ').appendTo(".detalle"); 
    return false; 
    $('.detalle fieldset .art_cantidad, .detalle fieldset .art_preciou, .detalle fieldset .art_desc').on('input',function() { 
     var qty = parseInt($('.detalle fieldset .art_cantidad').val()); 
     var price = parseFloat($('.detalle fieldset .art_preciou').val()); 
     var desc = parseFloat($('.detalle fieldset .art_desc').val()); 
     if($('.detalle fieldset .art_desc').val()==''){ 
      $('.detalle fieldset .art_precio').val((qty * price ? qty * price : 0).toFixed(2)); 
     } else { 
      $('.detalle fieldset .art_precio').val(((qty * price ? qty * price : 0) - desc).toFixed(2)); 
     } 
    }); 

    i++; 


});  

Вот мой HTML-код:

<div class="detalle"> 
         <fieldset class="articulos" id="0"> 
          <input name="articulo[0][nombre]" id="art_nombre" value="nombre" /> 
          <input name="articulo[0][cantidad]" id="art_cantidad" value="" /> 
          <input name="articulo[0][preciou]" id="art_preciou" value="" /> 
          <input name="articulo[0][cantidad]" id="art_desc" value="" /> 
          <input name="articulo[0][precio]" id="art_precio" value="" readonly="readonly" /> 
         </fieldset> 
        </div> 
        <a id="add">Agregar</a> 

Проблема заключается в том, что, когда я клонировать поля функция работает только для первого полей. Я думаю, это потому, что я не определяю ни имя класса, ни что-то подобное.

спасибо.

Вот мой jsfiddle: http://jsfiddle.net/8hsWu/2/

Answer 1

У вас есть несколько ошибок здесь.

1. В деле. Вы должны использовать

   $(".articulos").on("input", ":input", function(){ ... }); 
   

2. Вы создаете несколько элементов с одинаковыми идентификаторами, вам нужно добавить i к элементам, а также идентификатор.

3. Вы не указали, какие именно элементы вы принимаете.

   var qty = parseInt($('.detalle fieldset .art_cantidad').val()); 
   

Это неправильно, и не указывают на ваш точный элемент. что вам нужно сделать, это

var qty = parseInt($(this).parent().children(".art_candidat").val()); 

Это относится ко всем вашим элементам со значением.

Все это вы должны применять за пределами области $("#add").click() и использовать создание только для создания нового набора полей.

Суммируя все значения из .art_precio вы можете сделать:

var sum_precio = 0; 
$(".detalle").find(".art_precio").each(function(){ 
    sum_precio += parseInt(this.value); 
}); 

Plain Javascript this.value работает гораздо быстрее, чем $(this).val() и делает то же самое.

Answer 2

проблемы не хорошо определенные классы и идентификатор должны быть что-то вроде:

<input class="campo" name="articulo[0][cantidad]" id="art_cantidad0" value="" /> 

это может быть решением

http://jsfiddle.net/n2h8a/