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

Question

我找遍了，居然发现了一些类似的问题，但还是没能解决我的问题。我还在努力学习 jquery 并且还是新手。

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

（为了清楚起见，我将代码放到了 JSFiddle 中，这里是 link:

这是我的代码：

<?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/

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

Adding input dynamically, jquery become not working

html

javascript

jquery

autocomplete