使用.before添加输入时，jquery中的小计和总计

编辑：这个问题被问了很多次。这里是到的链接。直接答案是使用.on（'event'，'selector'，function）；在我的例子中，这是$（“fieldset”）。on（'keyup'，'line input'，multi-nputs）

---

我正在创建一个发票，允许用户通过单击按钮添加额外的服务付款行。每项服务都有小计

我遇到的问题是，对于使用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步骤向导中

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

$（“#添加服务”）。单击（函数（）{
$（“.serviceHelper”）。在（“）+
""+
" "+
" "+
" "+
""+
"  ");
});

---

你明白为什么小计对页面上的输入有效，而对动态添加的输入无效吗？TIA

jQuery在运行时只知道页面中的元素，因此jQuery无法识别添加到DOM中的新元素。为了解决这个问题，您必须使用从新添加的项冒泡事件到DOM中的某个点，当jQuery在页面加载上运行时，这个点就在DOM中。许多人使用

document

作为捕获冒泡事件的地方，但没有必要在DOM树中占据那么高的位置。当然

---

上的
键控
行输入

现在冒泡到文档级别，可以在那里处理。

这个问题被问了很多次。对于动态创建的元素，请使用具有的委派事件处理程序。例如，

$（“.control group”）.on（'keyup'，“.line input”，多输入）    $("#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>");
     });

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