Question

我正在将一个表格行插入表格中，无论如何它都变得混乱了。我有一个函数，当3个文本字段之一发生变化时被调用，这很好用我正在使用“inputfield”类来附加事件。但是当我插入行时，即使它具有相同的类标记，它也不会表现相同。

所以我正在尝试将事件绑定到它，并且这也没有任何想法？

//code for inserted row
var $html='<tr class="newrow" id="newrow'+$totrecords+'"><td><div id="discountlist_'+$totrecords+'">'+$totrecords+'</div></td><td><label for="ProductProductCode'+$totrecords+'"></label><input name="data[Product][product_code'+$totrecords+']" type="text" id="ProductProductCode'+$totrecords+'"/></td><td><label for="ProductHeight'+$totrecords+'"></label><input name="data[Product][height'+$totrecords+']" type="text" value="0" id="ProductHeight'+$totrecords+'"/></td><td><label for="ProductWidth'+$totrecords+'"></label><input name="data[Product][width'+$totrecords+']" type="text" value="0" id="ProductWidth'+$totrecords+'"/></td><td><label for="ProductPrice'+$totrecords+'"></label><input name="data[Product][price'+$totrecords+']" type="text" id="ProductPrice'+$totrecords+'" class="fieldinput" /></td><td><label for="ProductDiscountPercent'+$totrecords+'"></label><input name="data[Product][discount_percent'+$totrecords+']" type="text" id="ProductDiscountPercent'+$totrecords+'" class="fieldinput"/></td><td><label for="ProductDiscountListprice'+$totrecords+'"></label><input name="data[Product][discount_listprice'+$totrecords+']" type="text" id="ProductDiscountListprice'+$totrecords+'" /></td><td><label for="ProductQuantity'+$totrecords+'"></label><input name="data[Product][quantity'+$totrecords+']" type="text" id="ProductQuantity'+$totrecords+'" class="fieldinput"/></td><td><div class="total" id="total_'+$totrecords+'"></div</td>';


    //method 1 insert the row
    $(this).closest('TR').after($html);

    //bind event to productprice table
    $("#ProductPrice"+$totrecords).bind("change",calculateTotal);


function I'm trying to call

//custom function
var calculateTotal = function(){

    alert('ok');

    var $discountpercent = null;
    var $total=null;
    var $quantity=null;
    var $id=null;

    //get id of textbox
    var $id=$(this).attr('id');

    //get the row id
    //need to fix this and get all chars to the right of the
    $id=$id.toString();
    var myArray = $id.split('_');   
    $id=myArray[1]; 


    var $listprice= $("#listprice_"+$id).val();

    //turn entered number into %
    $discountpercent= $("#discountpercent_"+$id).val()/100;

    $discountlistprice=$listprice-($listprice*$discountpercent);    
    $quantity=$("#quantity_"+$id).val();

    //calculate total   
    $total=$quantity*$discountlistprice;

    //set the value
    $("#discountlistprice_"+$id).val($discountlistprice);

    //set the total by changing the total div
    $("#total_"+$id).html($total);  
}

Answer 1

事件需要反弹才能在新的DOM元素上运行。您可以使用.live()（来自jQuery v1.7，使用.on()）函数将其应用于所有将来的元素，或者您可以在插入后简单地重新绑定它。

.live（）（1.7之前）：

//bind event to productprice table
    $("#ProductPrice"+$totrecords).live("change",calculateTotal);

.on（）（1.7及更高版本）：

$("#ProductPrice"+$totrecords).on("change",calculateTotal);

jquery绑定事件，插入的表行不会响应事件

1 个答案: