Jquery 如何在动态创建的项目上运行每个循环？

在我的invoicing web应用程序中，我正在尝试使用jQuery计算客户端上

发票的
项目
总计：

$(function() {

  // Add a new row of item fields
  $('form.edit_invoice').on('click', '.add_fields', function(event) {   
    var regexp, time;
    time = new Date().getTime();
    regexp = new RegExp($(this).data('id'), 'g');
    $(this).closest('tr').before($(this).data('fields').replace(regexp, time)); // Replace ID with a unique ID
    calculateItemTotals();      
    event.preventDefault();
  });   

  // Update item total when item price or quantity gets changed
  $('input[id$="_price"], input[id$="_quantity"]').on('change', function() {
    calculateItemTotals();  
  });

});

function calculateItemTotals() {
  $('.item_fields').each(function() {

    var price = $(this).find('input[id$="_price"]').val();
    var quantity = $(this).find('input[id$="_quantity"]').val();

    var total = parseFloat(price) * parseFloat(quantity);

    $(this).find('.item_total').text(total);    
  });   
}

这适用于已保存所有项目的发票

但是，在创建新发票时，项目是通过jQuery动态添加的，上述功能不起作用

我怎样才能让它与这些项目一起工作呢

谢谢你的帮助

更新：

这是创建新发票项目的链接：

<a class='add_fields icon_link new' data-fields='<tr class="item_fields">   <td width="13%" data-title="Date">      <input class="item-datepicker" id="" type="text" value="20.10.2014" /><input id="invoice_items_attributes_2236275320_date" name="invoice[items_attributes][2236275320][date]" type="hidden" value="2014-10-20" />   </td>   <td width="42%" data-title="Description">   <input id="invoice_items_attributes_2236275320_description" name="invoice[items_attributes][2236275320][description]" type="text" value="Erstellung einer Website" />   </td>   <td width="15%" data-title="Price">     <input id="invoice_items_attributes_2236275320_price" min="0" name="invoice[items_attributes][2236275320][price]" type="number" value="50.0" /> </td>       <td width="10%" data-title="Qty">   <input id="invoice_items_attributes_2236275320_quantity" min="0" name="invoice[items_attributes][2236275320][quantity]" type="number" value="1" />  </td>   <td width="10%" data-title="Total">     <span class="item_total">0</span>   </td>       <td width="10%">        <input id="invoice_items_attributes_2236275320__destroy" name="invoice[items_attributes][2236275320][_destroy]" type="hidden" value="false" />      <a class="remove_fields icon_link destroy" href="#">Remove</a>  </td></tr>' data-id='2236275320' href='#'>Add item</a>

'data id='2236275320'href='#'>添加项目
这是动态创建元素的标准问题（多次询问）：对于动态创建的元素，您应该使用委托事件处理程序：

.
该函数是如何调用的？您正在运行选择器，因此它应该包含动态元素。在这种情况下，您调用的是
calculateItemTotals
method如果在动态内容加载后调用calculateItemTotals函数，那么它将起作用。确保在内容加载完成后调用函数。如果您提供JSFIDLE演示，这会更清楚。检查这个问题，可能有用。非常感谢！就连我也隐约记得读过这篇文章。你完全正确，我的代码现在可以工作了！
$('form.edit_invoice').on('change', 'input[id$="_price"], input[id$="_quantity"]', function()
{
    calculateItemTotals();  
});