2012-11-16 34 views
1

我需要初始化我的自动完成字段,每次克隆表中的一行。到目前为止,只有在页面加载时才初始化我的第一行。这是我的代码http://jsfiddle.net/4XZMb/951/当克隆表中的行时初始化自动完成

function addRow(){ 

    var numberExistingRows = 1; 
    // use "ADD" button to add new row 

    $('#add_row').click(function() { 
     // keep track of number of rows for input names 
     numberExistingRows++; 

     // clone a row 
     var $row = $('.dataRow:last').clone(); 

     $row.find('.deleteRow').click(deleteRow); 

     // strip previous values and fix names of inputs 
     $row.find('input').each(function() { 
      var $input = $(this); // cache this input into jQuery object in lieu of using $(this) in below functions for clarity and performance 

      $input.val(""); // reset value to none 

      // fix names 
      var thisInputName = $input.attr('id'); 
      $input.attr('id', thisInputName); 
     }); 

     $('#tableSo').append($row); 

     return false; 

    }); 

} 
+0

您正在用'id'克隆行。这会导致一些问题。我建议将它们改为课程。 – JoeFletch

回答

0

我已经更新您的jsFiddle

我将id的更改为类,以便与重复的id的不存在冲突。

var autocompleteSo = function(row){ 
    var $row = $(row) 
    $row.find(".tableService").autocomplete({ 
      source: 'services/add_services.php?servtype=1', 
      select: function(event, ui) { 
      $('.id_servtype').val(ui.item.id); 

     } 
    }); 

    $row.find(".soClient").autocomplete({ 
      source: 'salesorders/add_sales_order.php?client=1', 
      select: function(event, ui) { 
      $('.id_client').val(ui.item.id); 

     } 
    }); 

    $row.find(".tableProject").autocomplete({ 
      source: 'salesorders/add_sales_order.php?project=1', 
      select: function(event, ui) { 
      $('.id_project').val(ui.item.id); 

     } 
    }); 
} 

然后就在行的追加之后,我会运行此代码。

$('#tableSo').append($row); 
autocompleteSo($('#tableSo tr').eq(numberExistingRows - 1)); 
0

您有多个具有相同ID的元素。这不是有效的HTML。而是使用指定它是特定类型的自动完成的类,然后在新行中选择要初始化的类。

function autocompleteSo(row){ 

    row.find(".tableService").autocomplete({ 
      source: 'services/add_services.php?servtype=1', 
      select: function(event, ui) { 
      row.find('.id_servtype').val(ui.item.id); 

     } 
    }); 

    row.find("soClient").autocomplete({ 
      source: 'salesorders/add_sales_order.php?client=1', 
      select: function(event, ui) { 
      row.find('id_client').val(ui.item.id); 

     } 
    }); 

    row.find("tableProject").autocomplete({ 
      source: 'salesorders/add_sales_order.php?project=1', 
      select: function(event, ui) { 
      row.find('id_project').val(ui.item.id); 

     } 
    }); 
} 

这样的事情,然后调用autocompleteSo创建行时。

<tr class="dataRow soRows"> 
    <td> 
     <input type="text" class="input-medium tableService" name="tableService" /> 
     <input type="hidden" class="id_servtype" name="id_servtype[]" /> 
    </td> 
    ...