Промежуточный итог в jquery при добавлении входов с. До

Question

EDIT: Этот вопрос задан совсем немного. Вот ссылка на understanding event delegation. прямой ответ - использовать .on («событие», «селектор», функция); в моем случае это было $ ("fieldset"). on ('keyup', '.line input', multInputs);

---

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

Проблема, с которой я столкнулась, заключается в том, что я не могу заставить промежуточный итог работать для полей, которые динамически добавляются с помощью jQuery .before.

Вот моя форма счета-фактуры, с помощью кнопки, чтобы добавить еще одну строку:

<div class="control-group"> 
    <label class="control-label"> Service</label><div class="controls form-inline"> 
     <div class="line"> 
     <input type="text" class="span3" id="serivceName" placeholder="Service name"> 
     <input type="text" class="qty span1" id="qty" placeholder="qty"> 
     <input type="text" class="price input-small" name="cost" id="service" placeholder="Price"> 
     <input type="text" class="subtotal" id="sub" name="sub" value=""> 
     </div> 
    </div> 
    </div> 

<div class="serviceHelper"></div> 
     <br /> 
     <br /> 
<div class="pull-right span2"> 
     Total: <span id="income_sum" class="g_total"/> 
     </div> 

     <div> 
     <a id='addService' class="btn btn-success btn-small">Add another Product or Service</a><br /> 
        </div> 

Вот функция субтотальная в JQuery:

$(".line input").keyup(multInputs); 
function multInputs() { 
    var mult = 0; 

     //iterate through the .line div and find values 
    $(".line").each(function() {  
     var $val1 = $('.qty', this).val(); 
     var $val2 = $('.price', this).val(); 
     var $total = $val1 * $val2; 

     //make the subtotal input equal the total var 
     $(this).find(".subtotal").val($total); 

     //add the subtotals together to make the invoice total 
     var $form = $('#wizard'); 
     var $summands = $form.find('.subtotal'); 
     var $sumDisplay = $('#income_sum'); 
     var $sum = 0; 
     $summands.each(function() 
     { 
      var value = Number($(this).val()); 
      if (!isNaN(value)) $sum += value; 
     }); 
    $sumDisplay.text(sum); 
    }); 

} 

Счет строки, добавленные пользователем является копию контрольной группы уже на странице, но изменена, потому что я вставляю ее в мастер jQuery-Steps.

$("#addService").click(function(){ 
    $(".serviceHelper").before("<div class='control-group'> <div class='controls form-inline'>"+ 
     "<div class='line'>"+ 
     "<input type='text' class='span3' id='serivceName' placeholder='Service name'> "+ 
     "<input type='text' class='qty span1' id='qty' placeholder='qty'> "+ 
     "<input type='text' class='price input-small' name='cost' id='service' placeholder='Price'> "+ 
     "<input type='text' class='subtotal' id='sub' name='sub' value=''>"+ 
     "</div> </div> </div>"); 
    }); 

вы видите, почему субтотальное будет работать для входов на странице, но не для тех, динамически добавляются ли? TIA

Answer 1

jQuery знает только элементы на странице в то время, когда он запускается, поэтому новые элементы, добавленные в DOM, не распознаются jQuery. Чтобы бороться с этим, вы должны использовать event delegation, пузырящиеся события от недавно добавленных элементов до точки в DOM, которая была там, когда jQuery запускался при загрузке страницы. Многие люди используют document как место, где можно поймать пузырьковое событие, но не обязательно идти так высоко в дерево DOM. Как само собой разумеющееся you should delegate to the nearest parent that exists at the time of page load.

$(document).on('keyup', ".line input", multInputs); 

keyup на .line input Теперь пузыри до уровня документа и могут быть обработаны там.