[英]Autocomplete on dynamically generated divs
我在动态生成的div上的自动填充功能存在问题
文件1-Javascript文件,单击按钮可生成带有输入字段的div
var inputHTML = '<div id="addProducts" class="col-md-2 form-group"><input type="text" class="form-control" placeholder="Identyfikator opony" name="tyreID[]" id="tyreID"><input type="text" class="tyreSize form-control" placeholder="Rozmiar" name="tyreSize[]" id="tyreSize" required><input type="text" class="tyreManufacturer form-control" placeholder="Producent" name="tyreManufacturer[]" id="tyreManufacturer" required><input type="text" class="tyreTread form-control" placeholder="Bieżnik" name="tyreTread[]" id="tyreTread" required><input type="text" class="form-control" placeholder="DOT" name="tyreDOT[]" id="tyreDOT"><input type="number" step="0.01" min="0" class="form-control price" placeholder="Cena za sztukę" name="tyrePricePiece[]" id="tyrePricePiece" required><button href="#" class="btn btn-danger btn-block remove_field"><span class="glyphicon glyphicon-remove"></span> Usuń</button><button type="button" class="btn btn-warning btn-block" id="clone"><span class="glyphicon glyphicon-duplicate"></span> Kopiuj</button></div>';
var inputHTML2 = '<div id="addProducts2" class="col-md-2 form-group"><input type="text" class="form-control" placeholder="Identyfikator felg" name="alloyID[]" id="alloyID"><input type="text" class="alloySize form-control" placeholder="Rozmiar" name="alloySize[]" id="alloySize" required><input type="text" class="alloyManufacturer form-control" placeholder="Producent" name="alloyManufacturer[]" id="alloyManufacturer" required><input type="text" class="alloyPCD form-control" placeholder="Rozstaw" name="alloyPCD[]" id="alloyPCD" required><input type="text" class="form-control" placeholder="Otwór centrujący" name="alloyHub[]" id="alloyHub"><input type="number" step="0.01" min="0" class="form-control price" placeholder="Cena za komplet" name="alloyPricePiece[]" id="alloyPricePiece" required><button href="#" class="btn btn-danger btn-block remove_field"><i class="fa fa-times"></i> Usuń</button><button type="button" class="btn btn-warning btn-block" id="clone"><span class="glyphicon glyphicon-duplicate"></span> Kopiuj</button></div>';
var addInput = function() {
$(inputHTML).appendTo('div#products');
};
var addInput2 = function() {
$(inputHTML2).appendTo('div#products');
};
var cloneInput = function() {
$(this).appendTo('div#products');
}
$('button#btnAddProduct').click(addInput);
$('button#btnAddProduct2').click(addInput2);
$(document).on('click', '.remove_field', function(e) { //Once remove button is clicked
e.preventDefault();
$(this).parent('div').remove(0);
sumPrice();
});
$(cloneInput).on('click', '#clone', function(e) {
e.preventDefault();
$(this).parent('#addProducts').each(function() {
$(this).clone().appendTo('div#products').val($(this).val());
});
sumPrice();
});
$(cloneInput).on('click', '#clone', function(e) {
e.preventDefault();
$(this).parent('#addProducts2').each(function() {
$(this).clone().appendTo('div#products').val($(this).val());
});
sumPrice();
});
文件2-可自动完成工作的Javascript文件
var ac_config2 = {
source: "../../libs/orders/autocomplete_products.php",
select: function(event, ui){
$("#tyreID").val(ui.item.id_product);
$("#tyreSize").val(ui.item.Szerokosc+"/"+ui.item.Profil+"R"+ui.item.Srednica);
$("#tyreManufacturer").val(ui.item.Producent);
$("#tyreTread").val(ui.item.Model);
$("#tyreDOT").val(ui.item.DOT);
//$("#tyrePricePiece").val(ui.item.client_name);
},
minLength: 1
};
$("#tyreID").autocomplete(ac_config2);
如果我将productbox添加到html文件中,则自动完成效果很好,但是在动态生成的div上则完全不起作用。
如何在每个div上重新加载此自动完成文件? 还是有另一种方式?
还是有1件东西的问题。 如果我将其设置为#div id,则它总是将值复制到第一个div;如果是.div类,则它将值复制到所有divs。
@就像?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.