Как подключить плагин jquery к динамически создаваемому текстовому полю

У меня есть текстовое поле в JSP следующим образом

<input id="newHardware_details_0__hardware_type" name="details[0].hardware_type" class="autocompleter">

Я использую плагин jquery "автозаполнение" следующим образом:

$(function() {
    var availableTypes = [ "Desktop",
    "Laptop",
    "Mobile",
    "Tablet",
    "Printer",
    "Scanner",
    "Server",
    "Switch",
    "Wifi-router",
    "USB Dongle"
    ];
    $( ".autocompleter" ).autocomplete({
      source: availableTypes
    });
  });

У меня есть еще одна кнопка добавления, по нажатию которой я хочу добавить схожие текстовые поля с функцией автозаполнения. Я могу создать текстовое поле динамически из функции JavaScript, но не могу присоединить к нему автозаполнение JQuery плагин. обратите внимание, что кнопку "Добавить" можно нажимать любое количество раз, а новое сгенерированное текстовое поле будет иметь следующие имена

подробнее [1].hardware_type

Детали [2].hardware_type

подробности [3].hardware_type и т. д.

Javascript код выглядит следующим образом:

function addRow(tableID) {
    //alert ("adding row");
var table = document.getElementById(tableID);

var rowCount = table.rows.length;
var idx = rowCount+1;
var row = table.insertRow(rowCount);


var cell1 = row.insertCell(0);

var hardware_typeElement = document.createElement("input");
hardware_typeElement.type = "text";
hardware_typeElement.name = "details[" + idx + "].hardware_type";
hardware_typeElement.id = "newHardware_details_" + idx + "__hardware_type";
hardware_typeElement.className = "autocompleter";
cell1.appendChild(hardware_typeElement);

var label = document.createElement("label");
var t = document.createTextNode("Hardware Type");
label.setAttribute("for", "newHardware_details_" + idx + "__hardware_type");
label.appendChild(t);
cell1.insertBefore(label,document.getElementById("newHardware_details_" + idx + "__hardware_type"));



}

Я не знаком с Jquery. Любая помощь будет высоко оценена

1 ответ

Что-то вроде ниже подойдет:

$(/*select your td here*/).append('input type="text" class="my-textbox"');
$(/*select same td*/).find('input.my-textbox').callPluginMethod();

Обновление: модифицированный код в вопросе:

$("#trigger").click(function(){
   addRow();
})
function addRow() {
   $(tableID).append('<tr><td><input type="text" class="my-textbox"></input></td></tr>')
   $(tableID).find('tr:last > input.my-textbox').callPluginMethod();
}
Другие вопросы по тегам