Текстовое поле автозаполнения Jquery с атрибутом данных в динамически добавляемых строках
Следующий jQuery прекрасно работает для добавления строк и заполнения списка выбора из файла php / mysql. У меня проблема в том, что поле цены заполняется автоматически и изменяется при изменении выбора в каждой новой добавленной строке … но если вы вернетесь и попытаетесь изменить одну из уже добавленных строк, оно не работает. Например, если вы добавите 4 пустых строки, а затем попытаетесь вернуться назад и выбрать товары, цена будет указана только в последней строке. Или, если вы добавляете каждую строку и выбираете продукты перед добавлением новой строки, затем возвращаетесь и пытаетесь изменить продукт, ранее выбранная цена останется прежней. Есть идеи?
РЕДАКТИРОВАТЬ 1 Добавлен HTML
РЕДАКТИРОВАТЬ 2 Изменено изменение jQuery (function () на on () … по-прежнему работает точно так же. Автозаполнение работает только в последней добавленной строке.
var count = 0;
$(document).ready(function(){
$('p#add_field').click(function(){
count += 1;
$('#addingContainer').append('<label>Product or Service</label><select id="product_' + count + '" name="products[]'+ '" ><option value=""></option>');
$.getJSON('includes/productrow.php', function(data){
var select = $('#product_' + count + '');
$.each(data, function(key, val) {
$('<option/>').attr('value', val.product_id)
.attr('data-price', val.price)
.html(val.product)
.appendTo(select);
});
$('#addingContainer').append('</select> <label>Price</label><input type="text" id="price_' + count + '" name="prices[]' + '" class="price" ><br>');
});
$('#addingContainer').on('change', 'select[id="product_' + count + '"]', function(){
$('#price_' + count +'').val($('select[id="product_' + count + '"] option:selected').data('price'));
});});});
HTML:
<div id="addingContainer" class="pure-control-group">
<p id="add_field"><a href="#"><span>Add Products</span></a></p>
</div>
Решение
редактировать На самом деле, я думаю, что причина этого не в том, что вы объявили счет. Примерно так будет работать:
$(document).ready(function(){
$('p#add_field').click(function(){
var count = $('#addingContainer').data("count") || 0;
count += 1;
$('#addingContainer').data("count", count).append('<label>Product or Service</label><select id="product_' + count + '" name="products[]'+ '" ><option value=""></option>');
$.getJSON('includes/productrow.php', function(data){
var select = $('#product_' + count + '');
$.each(data, function(key, val) {
$('<option/>').attr('value', val.product_id)
.attr('data-price', val.price)
.html(val.product)
.appendTo(select);
});
$('#addingContainer').append('</select> <label>Price</label><input type="text" id="price_' + count + '" name="prices[]' + '" class="price" ><br>');
});
$('#addingContainer').on('change', 'select[id="product_' + count + '"]', function(){
$('#price_' + count +'').val($('select[id="product_' + count + '"] option:selected').data('price'));
});});});
Примечание. Я удалил ваше первоначальное объявление количества за пределами документа .ready и закрытие функции; это позволило вам отслеживать его (я справился с этим, установив его в атрибуте данных, есть другие и более эффективные способы), но именно поэтому вы включили (метод ‘change’ всегда использовал наибольшее количество.
Объявляя счетчик внутри функции, он зависит от этого закрытия — и поэтому он не будет увеличиваться для всех функций, которые вы объявили каждый раз, когда запускается новое событие щелчка.
Другие решения
Дайте это попробовать. Я добавил класс «pselect» в поле выбора, что облегчает работу с ним. Затем я изменил функцию изменения.
var count = 0;
$(document).ready(function(){
$('p#add_field').click(function(){
count += 1;
$('#addingContainer').append('<label>Product or Service</label><select id="product_' + count + '" name="products[]'+ '" class="pselect"><option value=""></option>');
$.getJSON('includes/productrow.php', function(data){
var select = $('#product_' + count + '');
$.each(data, function(key, val) {
$('<option/>').attr('value', val.product_id)
.attr('data-price', val.price)
.html(val.product)
.appendTo(select);
});
$('#addingContainer').append('</select> <label>Price</label><input type="text" id="price_' + count + '" name="prices[]' + '" class="price" ><br>');
});
$('#addingContainer').on("change",".pselect",function(){
$(this).next(".price").val($("option:selected", this).attr('data-price'));
});
});});