动态添加输入，jquery变得不工作

Question

我一直在搜索，实际上发现了一些类似的问题，但仍然无法解决我的问题。我还在努力学习 jquery，而且还是新手。

无论如何，我正在尝试在表格上动态添加输入。到目前为止，我已经能够使用新的输入文本来显示行的添加。输入文本假设具有自动完成功能。但是新的动态添加的输入永远不会成功显示自动完成选项。

（为了清楚起见，我把代码放到了JSFiddle中，这是链接：

http://jsfiddle.net/yodann/6t74T/637/)

这是我的代码：

<?php
                            echo '<tr class="row_odd"><td class="ui-widget">';
                            echo form_input(array('id' => 'aff[]', 'name' => 'aff', 'value' => '',
                                    'class' => 'form-control auto_form', 'placeholder' => 'Masukkan nama tempat',
                                    'style' => 'width:100%'));
                            echo '</td><td><img src="'.getfrontendlink('images/del_button.png').
                                 '" width="24px" height="auto"></td></tr>';
?>

function addRow() {
    var count = $('#aff_table tr').length;
    var tx = count % 2 == 0 ? 'row_even' : 'row_odd';
    $('#aff_table tr:last').after('<tr class="' + tx + '">' +
        '<td class="ui-widget">'+
        '</td><td><img src="<?=getfrontendlink('images/del_button.png')?>" width="24px" height="auto"></td></tr>');

    var dat = $('#aff_table tr:last').children('td.ui-widget');
    $("input.auto_form:last").clone(true).appendTo(dat);
    $("input.auto_form:last").val("");           
}

<?php 
        if ($datas != '') {
            $i = 0;
            $php_array = array();
            foreach ($datas->result_array() as $row):
                $php_array[$i++] = ($row['pp_id'].'>>'.$row['pp_name'].', '.
                    (strlen($row['address']) > 25 ? substr($row['address'],0,25) : $row['address']).', '.
                    $row['city_name'].', '.$row['province_name']);
            endforeach;

            $js_array = json_encode($php_array);
            echo "var availableTags = ". $js_array . ";\n";
        }
?>

$( ".auto_form" ).autocomplete({
    source: availableTags
});

Answer 1

如果我正确理解了问题： 在函数 addRow() 结束时，您应该再次初始化 .autocomplete 属性。 如果您实例化一次自动完成，那么在添加动态输入字段后jquery不会自动添加所需的属性。

function addRow() {
    var count = $('#aff_table tr').length;
    var tx = count % 2 == 0 ? 'row_even' : 'row_odd';
    $('#aff_table tr:last').after('<tr class="' + tx + '">' +
        '<td class="ui-widget">'+
        '</td><td><img src="<?=getfrontendlink('images/del_button.png')?>" width="24px" height="auto"></td></tr>');

    var dat = $('#aff_table tr:last').children('td.ui-widget');
    $("input.auto_form:last").clone(true).appendTo(dat);
    $("input.auto_form:last").val("");  

    $(".auto_form").autocomplete({source: availableTags});      
}

尝试将克隆更改为简单附加： http://jsfiddle.net/rk27xbce/