Question

我有这段代码 - 完美地运作

$('.canti,.precio').change(function() {
 var total = 0;
 var $item = $(this).parent();
 var canti = $item.find(".canti").val();
 var precio = $item.find(".precio").val();  
 total = parseFloat(canti * precio); 
 $item.find(".subto").attr("value", total); 
});

它根据字段集

进行计算

<fieldset class="item">
<input name="item[]" type"text" value="" />
<input class="canti" name="cantidad[]" type"text" value="" />
<input class="precio" name="preciounitario[]" type"text" value="" />
<input class="subto" name="importe[]" type"text"value="" readonly="readonly"/>
</fieldset>

我有多个实际的字段集，它工作得很好。然而，不是最初有X字段集，我希望用户能够按需要添加，所以写了这个：

var newFieldset='<fieldset class="item"><input name="item[]" type"text" value="" /><input class="canti" name="cantidad[]" type"text"  value="" /><input class="precio" name="preciounitario[]" type"text"  value="" /><input class="subto" name="importe[]" type"text"value="" readonly="readonly"/></fieldset>'
$(".add").click(function(){
    $(".add").before(newFieldset);
});

再次 - 完美地工作并添加一个新的字段集但是新的“虚拟”字段集中的.canti和.precio项目的计算没有做任何事情。

有什么想法吗？是我希望做的甚至可能吗？

http://www.cristalyaluminiodiestro.com/estimate-create-testing

有更完整的版本

Answer 1

需要委派活动

您可以使用jQuery .on()方法

$('body').on('change','.canti,.precio' ,function() {

这是因为您添加事件的方式不适用于动态创建的元素

＆＃39;主体＆＃39;可以用最近的静态父容器替换..

Answer 2

是的，这是可能的，你只需要将事件处理程序附加到一个祖先的元素，这可以使用the on method：

$('body').on('change', '.canti,.precio', function() { ... });

这是因为更改处理程序仅附加到在DOM准备好的情况下传递'.canti,.precio'过滤器的元素 - 动态添加的元素显然不会出现，因此不会附加处理程序。

在上面的例子中，我使用了body元素作为所有元素的共同祖先，如果你能够这样做，最好使用更接近的共同祖先来表现性能。

对Jquery创建的项目的计算不起作用

2 个答案: