Jquery 自动完成不适用于动态添加的行（输入）

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
                            };
                        }
                    }));
                }
            });
        }
    });

现在在“+”（添加更多）btn 上，我试图添加一个加载相同 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
                            };
                        }
                    }));
                }
            });
        }

         });
      });
   });

Input 字段是用 .append 添加的，但它不会加载 json 文件来选择“国籍”。我尝试在新 ID (#tags2) 上附加并且它可以工作，但是我不得不多次复制代码，我想在新的输入字段上加载。

有没有办法在点击时生成输入字段以接收新的 #ID ？ 谢谢

Answer 1

1. 使用 class 而不是 id 进行标识。
2. 使用函数返回自动完成对象。
3. 使用 $(this) 代替选择器。