JQuery autocomplete не работает с динамически добавленной строкой (входы)

Question

Когда я нажимаю и начинаю набирать национальности в файле JSON, загружается автозаполнение. Ничего страшного. Предварительный просмотр: http://mijaumijau.com/forma-b/

HTML

<input id="tags" style="text-transform: capitalize;"> 
<div class="append"></div> 
<div class="add-more" style="font-size: 20px; border: 1px solid #000; width:20px;">+</div> 

Jquery

$("#tags").autocomplete({ 

     source: function(request, response) { 
      $.ajax({ 
       url: "nat.json", 
       dataType: "json", 
       data: { term: request.term }, 


       success: function (data) { 
        var tag_val = $("#tags").val(); 
        response($.map(data, function (item) { 

        //filtering results.... 
         if (item.nationality.indexOf(tag_val) != -1) { 
          return { 
           label: item.nationality 
          }; 
         } 
        })); 
       } 
      }); 
     } 
    }); 

Теперь на '+' (добавить больше) БТН им пытаются добавить еще один поле ввода, которое загружает тот же файл JSON автозаполнения.

$(function(){ 
     $('.add-more').click(function(){ 
     var newItem = '<br><input id="tags" style="text-transform: capitalize;">'; 
     $('.append').append(newItem); 
     $('#tags').autocomplete({ 
      source: function(request, response) { 
      $.ajax({ 
       url: "nat.json", 
       dataType: "json", 
       data: { term: request.term }, 


       success: function (data) { 
        var tag_val = $("#tags").val(); 
        response($.map(data, function (item) { 

        //filtering results.... 
         if (item.nationality.indexOf(tag_val) != -1) { 
          return { 
           label: item.nationality 
          }; 
         } 
        })); 
       } 
      }); 
     } 

     }); 
     }); 
    }); 

Поле ввода добавляется с .append, но он не будет загружать файл JSON, чтобы выбрать «национальности». Ive попытался добавить новый ID (# tags2), и он работает, но потом мне придется копировать код столько раз, когда я хочу загружать новые поля ввода.

Есть ли способ генерировать поля ввода при щелчке, который возвращает новый #ID? Thanks

Answer 1

1. Использовать класс вместо идентификатора для идентификации.
2. Используйте функцию для возврата объекта автозаполнения.
3. Используйте вместо этого селектор $ (this).