Question

我正在尝试克隆从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);

    }
  });
}
);

当获取第一个输入的值时，一切正常。只是无法找到解决方案来分配新的克隆输入。有点复杂，所以这里是一个Jsfiddle的例子

http://jsfiddle.net/adrienboufflet/yvmqfmdd/

这方面的帮助会很棒，因为它已经过了数小时的努力而没有结果。我知道问题出在哪里，只是无法找到解决这个问题的工作。

干杯

Answer 1

您需要初始化新元素的插件，如

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

演示：Fiddle

Answer 2

您需要概括您的选择功能，例如：

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

请参阅this Fiddle.

jquery自动完成，克隆无法正常工作

2 个答案: