jquery - 克隆表中的行时初始化自动完成

Question

每次在我的表中克隆一行时，我都需要初始化我的自动完成字段。到目前为止，仅在页面加载时初始化我的第一行。这是我的代码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;

    });   

}

Answer 1

您有多个具有相同 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>
     ...

Answer 2

我已经更新了你的jsFiddle。

我将id's 更改为 classes，以便与重复的 's 没有冲突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));