Я использую эту функцию автозаполнения, которая берет значение из ввода descricaoItem(description)
, отправляет его в запрос и заполняет другое поле ввода значением codigo(code)
из базы данных. Код ниже:
$(document).ready(function() {
$('#descricaoItem0').change(function () {
$.post('mandaDescricao.php',
{
descricao: document.getElementById('descricaoItem0').value
},
function(data){
var obj = $.parseJSON(data);
$('#codigoItem0').val(obj.codigo);
});
});
});
Это хорошо работает, но я хочу динамически создавать эти входы, когда пользователь нажимает кнопку. Уже есть эта функция, и входы создаются с разными ID (descricaoItem0
, descricaoItem1
и т.д.), descricaoItem1
связаны с (codigoItem0
, codigoItem1
,...). Но при динамически создаваемых входах я не могу найти способ использовать указанную выше функцию.
Не могли бы вы мне помочь? Я не хочу копировать и вставлять эту функцию 'до descricaoItem20
.
Оберните свой объект назначения в функцию! Каждый раз, когда добавляется новый вход, запускайте эту функцию и передавайте правильный номер идентификатора.
function assignOnChangeToInput(id) {
$('#descricaoItem' + id).change(function() {
$.post('mandaDescricao.php', {
descricao: document.getElementById('descricaoItem' + id).value
},
function(data) {
var obj = $.parseJSON(data);
$('#codigoItem' + id).val(obj.codigo);
});
});
});
}
[ {id: '#codigoItem0'}, {id: '#codigoItem1'}, {id: '#codigoItem2'} ]
var JSONObj = [ {id: '#codigoItem0'}, {id: '#codigoItem1'}, {id: '#codigoItem2'} ]
JSONObj.forEach(function(input) {
var id = input.id;
$(id).change(function(e) {
$.post('mandaDescricao.php',
{
descricao: document.getElementById(id).value
},
function(data){
var obj = $.parseJSON(data);
$(id).val(obj.codigo);
});
});
})
})
Возможно, стоит сделать более подробный массив JSON для ввода, в котором может выглядеть объект ввода-объекта:
{
id: 'inputID',
name: 'inputName'
val: 'Foo',
placeholder: 'Bar',
callback: '_aCallbackMethod()'
}
И тогда вы можете создавать элементы ввода на основе массива этих подробных входов и обрабатывать их как объекты, а не требовать много запросов к DOM с помощью $ (blah). :-)
Вам не нужно использовать идентификатор (который поможет с вашей динамической проблемой). Вы можете добавить событие ко всем входам с классом, а затем использовать this
внутри события изменения ввода для ввода, с которым пользователь взаимодействует, например
<input class="descricaoItem" />
<input class="descricaoItem" />
<input class="descricaoItem" />
<input class="descricaoItem" />
<input class="descricaoItem" />
$(document).ready(function() {
$('.descricaoItem').on("input", function() {
var descricaoValue = $(this).val();
var self = this; // save context of this
$.post('mandaDescricao.php', {
descricao: descricaoValue
},
function(data) {
var obj = $.parseJSON(data);
$(self).val(obj.codigo);
});
});
});
Вот минимальный пример (без запроса POST)
$(document).ready(function() {
$('.descricaoItem').on("input", function() {
var descricaoValue = $(this).val();
var self = this; // save context of this
$(self).val("codigo obj: " + Math.floor(Math.random() * 100) + 1);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="descricaoItem" />
<input class="descricaoItem" />
<input class="descricaoItem" />
<input class="descricaoItem" />
<input class="descricaoItem" />
input
динамически, вы должны убедиться, что добавили обработку событий после того, какinput
были созданы и обработаны в DOM. Я не могу точно сказать, что это проблема, но это то, что нужно рассмотреть.