JQuery autocomplete на сгенерированном входе с «переработанным» идентификатором

Question

У меня есть таблица, состоящая из строк с входами. Строки клонируются и добавляются динамически, если в первом входе каждой строки выбрано значение автозаполнения.

Каждый раз, когда добавляется новая строка, я хочу применить .autocomplete к первому вводу. Обычно это легко, как видно из этого jsfiddle.

У меня есть несколько иной подход, когда я меняю идентификатор входа, где сделан выбор. Я думаю, именно поэтому я не могу применить автозаполнение к клонированной линии, но я не могу понять, почему?

Вот код в вопросе (jsfiddle here)

// Make new line. (I have additional code for improved functionality in my production code) 
function newLine() { 
    // Send the line to backend for updating mysql. Data returned is 
    // the mysql id for the "autocompleted" line. Emulated here by a random number 
    var randomNumber = Math.floor(Math.random() * 100) + 1 
    $("#idLine0").attr("id", "idLine" + randomNumber) 

    //Make clone of the last line 
    var row = $("#test tr:last").clone(true); 

    //Give the ID "idLine0" (which I've reserved for the bottom line) to the new line. 
    $(".AC", row).val("").attr({ 
     "id": "idLine0", 
     "placeholder": "Autocomplete does not work here" 
    }) 

    row.insertAfter("#test tr:last"); 
    //$(".AC").autocomplete("destroy") 
    applyAutocomplete("#idLine0") 
} 

function applyAutocomplete(id) { 
    $(id).autocomplete({ 
    source: [{ 
     value: "ActionScript", 
     type: "type 1", 
     comment: "none" 
    }, { 
     value: "TestScript", 
     type: "type 2", 
     comment: "lots" 
    }, { 
     value: "AlphaScript", 
     type: "type 3", 
     comment: "even more" 
    }, { 
     value: "BravoScript", 
     type: "type 4", 
     comment: "lots and lots" 
    }, { 
     value: "CharlieScript", 
     type: "type 5", 
     comment: "comment" 
    }, { 
     value: "DeltaScript", 
     type: "type 6", 
     comment: "no comment" 
    }], 
    minLength: 1, 
    open: function (event, ui) { 
     var header = "<li style='border-bottom: 1px solid black; padding-top: 10px;'>" + 
      "<a style='font-size:1em;font-weight:bold; display:inline-block;'>" + 
      "<span class='ui-span'>Product</span><span class='ui-span'>Type</span>" + 
      "<span class='ui-span'>Comment</span></a></li>" 

     $("ul.ui-autocomplete[style*='block']").find("li:first").before(header); 
    }, 
    select: function (event, ui) { 
     console.log($(this.element)) 
     newLine() 
    } 
    }).data("ui-autocomplete")._renderItem = function (ul, item) { 
    return $("<li>") 
     .data("ui-autocomplete-item", item) 
     .append("<a><span class='ui-span'>" + item.value + 
     "</span><span class='ui-span'>" + item.type + 
     "</span><span class='ui-span' style='width:250px;'>" + item.comment + "</span></a>") 
     .appendTo(ul); 
    }; 
} 

Answer 1

После работы над вашей проблемой немного, я видел эту строку:

var row = $("#test tr:last").clone(true); 

И эта линия проблема, более конкретно «истинный» параметр bool. Как вы можете видеть на jquery .clone docs:

Логические, указывающие обработчики событий должны быть скопированы вместе с элементами ...

В основном это означает, что все на этом элементе будет clonned, handdlers, триггеры и т. д. ... Каждый раз, когда вы используете свой первый элемент ввода, вы сможете увидеть рабочие и клонирование автозаполнения.

Таким образом, изменить это:

var row = $("#test tr:last").clone(true); 

Для этого:

var row = $("#test tr:last").clone(); 

Я сделал более "чистую" версию jsfiddle: http://jsfiddle.net/JuanHB/8uhNq/3/