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

Question

Я искал все и фактически нашел некоторые подобные проблемы, но до сих пор не могу решить мою проблему. Я все еще борюсь за обучение jquery и все еще новое.

Anywa, я пытаюсь динамически добавлять входные данные на столе. До сих пор мне удалось показать добавление строки с новым текстом ввода. Текст ввода предполагает наличие функции автозаполнения. Но новый динамически добавленный вход никогда не сможет показать параметры автозаполнения.

(Чтобы было понятно, я положил код в 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});  
} 

попытался изменить клон простой Append: http://jsfiddle.net/rk27xbce/