jquery綁定事件，插入的表格行將不會響應事件

我正在將一個表格行插入到表格中，無論如何它會變得混亂。我有一個函數會在3個文本字段中的一個發生變化時被調用，這很好，我使用「inputfield」類來附加事件。但是，當我插入行時，即使它具有相同的類標記，也不會發生相同的行爲。jquery綁定事件，插入的表格行將不會響應事件

所以我試圖將事件綁定到它，這不工作任何想法爲什麼？

//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); 
}

來源

2012-03-16 fuzzy dunlop

請創建一個小提琴用盡可能少的代碼儘可能地幫助你的問題更清楚。 – iambriansreed 2012-03-16 19:54:25

事件需要被反彈才能在新的DOM元素上起作用。您可以使用.live()（來自jQuery v1.7，使用.on()）函數將其應用於所有將來的元素，或者您可以在插入後簡單地重新綁定它。

.live（）（預1.7）：

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

。對（）（1.7及更高版本）：

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

來源

2012-03-16 20:03:44 Damien

即時通訊試圖做到這一點; //將事件綁定到產品價格表 '$（「＃ProductPrice」+ $ totrecords）.bind（「change」，calculateTotal）;' doestn爲我工作 – 2012-03-16 20:05:40

感謝您的工作:) – 2012-03-16 20:09:09

酷:)出於興趣，你使用.on（）或live（）？你使用的是哪個版本的jQuery？（只是好奇）。 – Damien 2012-03-16 20:09:59

jquery綁定事件，插入的表格行將不會響應事件

回答

相關問題