У меня есть проблема с помощью автоматического заполнения jQuery с динамично созданными исходными данными (снова созданный с jQuery). Я не могу заставить автоматическое заполнение связывать с новыми исходными данными.
Автоматическое заполнение
$("#description").autocomplete({
source: function(request, response) {
$.ajax({
url: "../../works_search",
dataType: "json",
type: "post",
data: {
maxRows: 15,
term: request.term
},
success: function(data) {
response($.map(data.works, function(item) {
return {
label: item.description,
value: item.description
}
}))
}
})
},
minLength: 2,
});
Новая строка таблицы с исходными данными
var i = 1;
var $table = $("#works");
var $tableBody = $("tbody",$table);
$('a#add').click(function() {
var newtr = $('<tr class="jobs"><td><input type="text" name="item[' + i + '][quantity]" /></td><td><input type="text" id="description" name="item[' + i + '][works_description]" /></td></tr>');
$tableBody.append(newtr);
i++;
});
Я знаю, что проблема происходит из-за содержания, создаваемого после того, как страница была загружена, но я не могу выяснить, как обойти его. Я считал несколько связанных вопросов и столкнулся с jQuery живой метод, но я нахожусь все еще в заторе!
Совет?
Сначала вам нужно сохранить параметры для .autocomplete ()
, например:
var autocomp_opt={
source: function(request, response) {
$.ajax({
url: "../../works_search",
dataType: "json",
type: "post",
data: {
maxRows: 15,
term: request.term
},
success: function(data) {
response($.map(data.works, function(item) {
return {
label: item.description,
value: item.description
}
}))
}
})
},
minLength: 2,
};
Лучше использовать class
для маркировки входа
, например:
<input type="text" class="description" name="item[' + i + '][works_description]" />
Наконец, когда вы создаете новую строку таблицы, примените .autocomplete ()
с параметрами, уже сохраненными в autocomp_opt
:
$('a#add').click(function() {
var newtr = $('<tr class="jobs"><td><input type="text" name="item[' + i + '][quantity]" /></td><td><input type="text" class="description" name="item[' + i + '][works_description]" /></td></tr>');
$('.description', newtr).autocomplete(autocomp_opt);
$tableBody.append(newtr);
i++;
});