jquery自动完成克隆不工作

我想克隆从json数组获取值的输入。我的问题是，克隆时，给新的克隆输入新的ID，我无法获得新的克隆输入工作。jquery自动完成克隆不工作

这里是我使用的自动完成功能。

$(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/

帮助将是巨大的，因为它一直没有结果的斗争小时。我知道问题来自哪里，只是无法找到围绕此问题的工作。

干杯

来源

2015-02-23 Adrien Boufflet

在一个侧面说明，ID必须是唯一的。你有多个具有相同ID的元素（'＃td01'，'＃td02'等），这就是类的用途。 – blex 2015-02-23 14:48:32

对不起。只是在小提琴中更新了它。 – 2015-02-23 14:55:29

需要初始化新元素的插件也很喜欢

// 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

来源

2015-02-23 14:43:03

好的，我明白了。但在你的小提琴创建新的输入更新上面的旧输入的字段？ – 2015-02-23 14:58:52

@AdrienBoufflet看到更新 – 2015-02-23 15:03:41

欢呼声。像魅力一样工作;）在这一个上失去了太多时间。非常感谢 – 2015-02-23 15:09:29

你需要推广你的选择功能，例如像：

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.

来源

2015-02-23 15:02:12 bobdye

非常感谢你的支持！现在看起来很容易;）很想给你代表。但还没有足够的钱给别人。 – 2015-02-23 15:08:53

jquery自动完成克隆不工作

回答

相关问题