Question

html代码

                   <div class="multi-field-wrapper panel-body">
                                <div class="multi-fields " >
                                    <div class="multi-field row form-group">
                                        <div class="col-lg-2">
                                            <input type="text" name="box_no[]"  placeholder="Box No" class="form-control" required>

                                        </div>
                                        <div class="col-lg-4">
                                            <input type="text" name="product_name[]"  placeholder="Product Name" class="auto form-control" required>
                                        </div>

                                        <div class="mb-md hidden-lg hidden-xl"></div>

                                        <div class="col-lg-2">
                                            <input type="text" name="product_quantity[]" id="product_quantity" placeholder="Quantity" class="form-control" required>
                                        </div>

                                        <div class="mb-md hidden-lg hidden-xl"></div>

                                        <div class="col-lg-2">
                                            <input type="text" name="price[]"  placeholder="Price" class="form-control" required>
                                        </div>
                                        <div class="mb-md hidden-lg hidden-xl"></div>
                                        <div class="col-lg-2">
                                            <button class="remove-field btn-success" type="button"><i class="fa fa-minus"></i></button>
                                        </div>
                                    </div>
                                </div>
                                <br>    
                                 <button type="button" class="add-field btn-primary">Add More Product</button>
                                </div>

javascript for autoload

    $(function(){
        $(".auto").each(function(){ 
            $(this).autocomplete({
                source: "<?=BASE_ADMIN_URL?>invoice/getAutoCompliteData" ,
            });
        });
    });

我正在使用此代码动态添加行

$(document).ready(function() {
    $('.multi-field-wrapper').each(function() {
        var $wrapper = $('.multi-fields', this);

        $(".add-field", $(this)).click(function(e) {
            $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input:text').val('').focus();
        });

        $('.multi-field .remove-field', $wrapper).click(function() {
            if ($('.multi-field', $wrapper).length > 1)
                $(this).parent().parent('.multi-field').remove();
        });
    });

});

问题是autoload与类的第一个元素一起工作正常

但是当我添加另一个元素时，自动加载仅在第一个元素上显示结果

Answer 1

您需要再次调用自动加载/自动填充功能。因为它会在页面加载时立即发生，所以它不会影响您在事后添加到页面的任何内容。在创建新输入时尝试调用该函数。

Answer 2

您无法为尚不存在的HTML元素初始化插件。 jQuery只适用于现在的元素，它不能进入未来。

每次添加新元素并想为其初始化插件时，都必须初始化该插件。也许是这样的：

$(".add-field", $(this)).click(function(e) {
    var newElement = $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input:text');
    newElement.autocomplete({
        source: "<?=BASE_ADMIN_URL?>invoice/getAutoCompliteData" ,
    });
    newElement.val('').focus();
});

Answer 3

在这里，“ multi-field-wrapper”是不重复的父类，“ auto”是要在其中初始化自动完成的重复区域下的字段的类。它对我来说很完美。

$(".multi-field-wrapper").on('focus',".auto",function(){
    $(this).autocomplete({
            source: "<?=BASE_ADMIN_URL?>invoice/getAutoCompliteData" ,
    });
});

jquery autoload不使用具有相同类的多个字段

3 个答案: