2016-02-07 63 views
0

我有,我加入到添加/使用.clone取出並卸下襬臂的能力的錶行選擇改變使用AJAX的多個選擇

我也有一個AJAX調用我的控制器代碼點火器搶數據並基於數據填充其他輸入。

它目前工作的第一個,我可以從下拉列表中選擇一個選項,並填充相鄰輸入的值。我的問題是,當我點擊添加,併成功地克隆行,當我改變下拉,就像.change和.ajax事件不再起作用。

這裏是我的jQuery的是在這裏,我覺得我有問題:

$('.invoice_line_item').each(function(){ 
    $(this).change(function(){ 

     var table = $(this).closest('.tr_clone'); 

     var select_value = $(this).val(); 
     //alert(item_id + ' ' + select_value); 
     console.log(item_id + select_value); 

     $.ajax({ 
      url: '<?php echo site_url("Invoice_item/get_item"); ?>', 
      type: 'POST', 
      dataType: "JSON", 
      data: ({'id' : select_value}), 
      success: function (data, status) 
      { 
       //alert('Success ' + data); 
       console.log(data); 
       $(table).find('.description').val(data['work_description']); 
       $(table).find('.amount').val(data['amount']); 
       $(table).find('.quantity').val(data['quantity']); 
       $(table).find('.price').val(data['amount']); 
      }, 
      error: function (data, xhr, desc, err) 
      { 
       alert('An Error Occurred: ' + xhr + ' ' + desc + ' ' + err); 
       console.log(data); 
      } 
     }); 
    }); 
}); 

這裏是HTML:

<tbody> 
    <tr class="tr_clone" id="inv_line_1"> 
    <td> 
     <select id="line_item_1" name="invoice_line_item" class="invoice_line_item"> 
      <option></option> 
      <?php 
    foreach($prefix_line_items as $line_item) 
    { 
     ?> 
     <option value="<?php echo $line_item['id']; ?>"><?php echo $line_item['item']; ?></option> 
     <?php 
    } 
    ?> 
     </select> 
    </td> 
    <td><input type="text" id="description_1" name="description" class="description" value="" /></td> 
    <td><input type="currency" id="amount_1" name="amount" class="amount" value="" /></td> 
    <td><input type="number" id="quantity_1" name="quantity" class="quantity" value="" /></td> 
    <td><input type="currency" id="price_1" name="price" class="price" value="" readonly/></td> 
    <td><a href="#" onclick="return false;" class="add-line-item"><i class="fa fa-plus"></i></a> <a href="#" onclick="return false;" class="remove-line-item"><i class="fa fa-minus"></i></a></td> 
    </tr> 
</tbody> 

在控制檯中沒有錯誤,工作在第一時間爲第一行,但當我點擊添加按鈕,它複製行,我改變(克隆)選擇元素和它的像jQuery不再觸發,所以它不是通過ajax或打印到控制檯抓取數據。

回答

0

在克隆元素時,默認情況下,它不會將事件處理程序複製到新元素。爲此,您必須通過true來告訴克隆方法。 最佳做法是克隆元素,然後僅將所需事件手動複製到新元素。

檢查下面的例子在jQuery的網站上給出的,

/ Original element with attached data 
 
var $elem = $("#elem").data("arr": [ 1 ]), 
 
    $clone = $elem.clone(true) 
 
    

希望它可以幫助..

+0

吉茲,就這麼簡單;謝謝! – Derek