Javascript jquery自动完成，克隆不起作用

我试图克隆从json数组获取值的输入。我的问题是，当克隆时，给新的克隆输入新的id，我无法让新的克隆输入工作

这是我正在使用的自动完成函数

$(function() {
  $( "#cars_1" ).autocomplete({
    source: [ { label: "auto1", Weight: "3400kg" , Width: "1M" , Height: "4M" }, { label: "car 2", Weight: "3000kg" , Width: "2M" , Height: "14M" }, { label: "motorcycle 12", Weight: "70kg" , Width: "5M" , Height: "3M" }],
     minLength: 0,
    select: function( event, ui ) {
            event.preventDefault();
            $().val(ui.item.label);

            this.value = ui.item.label;
            $('#weight_1').val(ui.item.Weight),

           this.value = ui.item.label;
            $('#width_1').val(ui.item.Width),

           this.value = ui.item.label;
            $('#height_1').val(ui.item.Height);

    }
  });
}
);

当然，在获取第一个输入的值时，所有这些都可以正常工作。 只是无法找到一个解决方案，将其分配给新的克隆输入。 解释起来有点复杂，所以这里有一个JSFIDLE示例

在这一点上的帮助将是巨大的，因为它已经挣扎了几个小时没有结果。 我知道问题是从哪里来的，只是找不到解决这个问题的方法

---

干杯

您需要为新元素初始化插件

// autocomplete function

$(function () {
    function autocomplete($els) {
        $els.autocomplete({
            source: [{
                label: "auto1",
                Weight: "3400kg",
                Width: "1M",
                Height: "4M"
            }, {
                label: "car 2",
                Weight: "3000kg",
                Width: "2M",
                Height: "14M"
            }, {
                label: "motorcycle 12",
                Weight: "70kg",
                Width: "5M",
                Height: "3M"
            }],
            minLength: 0,
            select: function (event, ui) {
                event.preventDefault();
                $().val(ui.item.label);

                this.value = ui.item.label;
                var $tr = $(this).closest('tr');
                $tr.find('.weight').val(ui.item.Weight),

                this.value = ui.item.label;
                $tr.find('.width').val(ui.item.Width),

                this.value = ui.item.label;
                $tr.find('.height').val(ui.item.Height);

            }
        });
    }

    autocomplete($("#cars_1"))

    $('#btnAdd').click(function () {

        var num = $('.datatable_class').length;
        var newNum = num + 1;
        var newElem = $('#input1').clone().attr('id', 'input' + newNum).removeClass('clonedInput').addClass('ShowClones');

        newElem.find('.cars').attr('id', 'cars_' + newNum);
        newElem.find('.weight').attr('id', 'weight_' + newNum);
        newElem.find('.width').attr('id', 'width_' + newNum);
        newElem.find('.height').attr('id', 'height_' + newNum);

        $('#input' + num).after(newElem);
        autocomplete($("#cars_" + newNum))


        if (newNum == 300)

        $('#btnAdd').attr('disabled', 'disabled');
    });
});

---

演示：

您需要概括选择函数，例如：

  function autoFunc( event, ui ) {
        event.preventDefault();
        var row = $(event.target).parents('tr').first();

        this.value = ui.item.label;
        row.find('#td02 input').val(ui.item.Weight),

       this.value = ui.item.label;
        row.find('#td03 input').val(ui.item.Width),

       this.value = ui.item.label;
       row.find('#td04 input').val(ui.item.Height);
  }

然后将该函数应用于新元素，例如

            newElem.find('#td01 input')
                .attr('id', 'cars_' + newNum)
                .autocomplete({
                     source: autoSrc,
                     minLength: 0,
                     select: autoFunc
                     });;

---

请参见旁注，ID必须是唯一的。您有多个元素具有相同的ID（

#td01

，

#td02

，等等），这就是类的用途。是的，很抱歉。刚刚在小提琴上更新了。好的，我明白了。但是在你的小提琴中，新的输入会更新上面旧输入的字段？干杯。工作起来很有魅力；）在这件事上浪费了很多时间。非常感谢你的邀请！！！！现在看起来很容易；）我很想给你代言，但还没有足够的钱给别人。