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自動完成克隆不工作

回答

相關問題