Динамическое добавление ввода, jquery перестает работать

Я искал повсюду и на самом деле нашел некоторые похожие проблемы, но до сих пор не могу решить свою проблему. Я все еще борюсь за изучение 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
});

javascript html jquery autocomplete
person yodann    schedule 03.04.2015    source источник
comment
Привет, похоже, вы смешиваете код Javascript и PHP вместе. Если это так, то ваш код не будет работать. Если вы делаете это неохотно, то можете ли вы добавить более точный код, чтобы я мог помочь вам в его отладке.   -  person That Guy    schedule 03.04.2015
comment
почему так? потому что начальный ввод работает нормально. только добавление позже во время выполнения, которое никогда не может показать параметр автозаполнения.   -  person yodann    schedule 03.04.2015
comment
Привет, Дубем, извини, что ошибся. я разместил код на jsfiddle. Спасибо. jsfiddle.net/yodann/6t74T/637   -  person yodann    schedule 03.04.2015
comment
Я думаю, что на ваш вопрос дан ответ здесь stackoverflow.com/questions/24656589/   -  person tsuensiu    schedule 03.04.2015

Ответы (1)


arrow_upward
1
arrow_downward

Если я правильно понял проблему: в конце функции 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/

person TesiaMedia    schedule 03.04.2015
comment
нет, это не работает. Я пробовал это раньше, и не повезло. - person yodann; 03.04.2015
comment
Я пробовал играть с вашим jsfiddle, и основная проблема связана с клонированием, потому что вы получаете одинаковые атрибуты (имя и идентификатор), а для правильной работы jquery требуется уникальный идентификатор. - person TesiaMedia; 03.04.2015
comment
TesiaMedia, большое спасибо за помощь. Наконец-то я решил проблему. Здесь следует отметить две вещи: поместить внутрь document.ready(function) и, как вы сказали, jquery нужен уникальный идентификатор. :) - person yodann; 04.04.2015