Subtotal and total in jquery when adding inputs with .before -

Edit: This question is asked slightly, here is the link to use the direct answer To do On ('event', 'selector', ceremony); ('Keyboard', 'line input', multi input);

---

I am creating an invoice which allows users to add additional lines, by clicking a button, each line of service payment services is a subset of

The problem I am facing is that I can not get subtotal for working for those areas which have been dynamically added to jQuery.

  & lt; Div class = "control-group" & gt;  
 Here is my invoice form with the button to add another line:  & lt; Label class = "control-label" & gt; Service & lt; / Label & gt; & Lt; Div class = "control form-inline" & gt; & Lt; Div class = "line" & gt; & Lt; Input type = "text" class = "span3" id = "serivceName" placeholder = "service name" & gt; & Lt; Input type = "text" class = "qty span1" id = "qty" placeholder = "qty" & gt; & Lt; Input type = "text" class = "value input-small" name = "cost" id = "service" placeholder = "value" & gt; & Lt; Input type = "text" class = "sub-total" id = "sub" name = "sub" value = "" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "serviceHelper" & gt; & Lt; / Div & gt; & Lt; Br / & gt; & Lt; Br / & gt; & Lt; Div square = "pull-right span2" & gt; Total: & lt; Span id = "income_sum" square = "g_total" /> & Lt; / Div & gt; & Lt; Div & gt; & Lt; An id = 'addService' class = "btn btn-success btn-small" & gt; Add another product or service & lt; / A & gt; & Lt; Br / & gt; & Lt; / Div & gt;  

Here's a sub-value in jQuery:

  $ ("line input"). Keyboard (multInputs); Function multInputs () {var mult = 0; // iterative through line. Line and value $ (". Line"). Each (function () {var $ val1 = $ ('. Qty', this) .val (); var $ val2 = $ ('.price', this) .val (); var $ total = $ val1 * $ Val2; // sub-totals make the input equal to the total var $ (this) .fund (". Subtotal") .val ($ total); // invoice total var $ form = $ ('# wizard'); Add subtotals together to create 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 (yoga);}); }  

The invoice line page added by the user already has a copy of the control group, but modified because I am putting it in the jQuery-step wizard. ("(Service. Class = 'form-inline control' & gt;" + "& lt; div class = 'line' before (" & lt; div class = 'control-group' & gt; & lt; div) "+" Input type = 'text' class = 'span3' id = 'serivceName' placeholder = 'service name' & gt; "+" & gt; input type = 'text' class = 'qty span1' Id = 'qty' placeholder = 'qty' & gt; "+" & lt; input type = 'text' class = 'price input-small' name = 'cost' id = 'service' placeholder = 'price' & gt; ; "+" & Lt; input type = 'text' class = 'sub-total' id = 'sub' name = 'sub' value = '' & gt; "+" & lt; / div & gt; & lt ; / Div> & lt; / div & gt; ");});

Do you see Why would subtotal work for the given input on the page, but not for people dynamically added? TAA

jQuery is only aware of the elements on the page that it runs, so new elements are identifiable by jQuery added to the DOM. To counter that you have a point in the dot As far as the newly added items will have to be used in the blinking of incidents, When there was running on page load. Many people use the document as a place to catch the bubble incident, but Dom is not necessary to move above the tree. As a matter of course

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

Keep > on .line input can now handle bubbles and there from the document level.