Question

我要做的是对新添加的输入进行自动完成绑定。这是我编码的方式：

<input size="80" type="text" class="ccnotes" name="dwg_notes[]" id="1200" />

这是用于自动完成的输入。现在，当我添加新输入时，我会执行以下操作：

$('a#more_notes').on('click',function(){
    var a = $('table#dwg_notes tr:last').clone(true);
    $('table#dwg_notes tr:last').after(a);  
});

添加了一个新的表格行，并添加了自己的输入。

但是，在添加新输入之前，我将自动完成绑定到表的现有输入。我在一个函数中这样做：

function repnotes()
{
    $(function(){
        $(".ccnotes").each(function(index){

            var this_id = $(this).attr("id"); // current inputs id
            var new_id = parseInt(this_id)+index; // a new id
            $(this).attr("id", new_id); // change to new id 
            $(this).autocomplete({
                   source: function(request, response)
                   {
                       $.ajax({
                           url: getBaseURL()+"inspection/ajax/notes_json.php",
                           dataType: "json",
                           data: {note: request.term},
                           success: function(data)
                           {
                               $(".ccnotes #"+new_id).removeClass('ui-autocomplete-loading');
                               response($.map(data, function(item)
                               {
                                   return  {
                                       label: item.label
                                    };
                                }));
                            }
                        });
                    },
                    select: function(event, ui)
                    {
                        $(this).val(ui.item.label);
                        $(".ccnotes").removeClass('ui-autocomplete-loading');

                    }}).data( "autocomplete" )._renderItem = function(ul, item){

                          return $( "<li></li>" ).data( "item.autocomplete", item ).append( "<a><strong>" + item.label + "</a>" ).appendTo( ul );

                 };
        }); 
    });
}
repnotes(); // initialize inputs

这适用于初始输入。但是，如果我要添加repnotes()函数：

$('a#more_notes').on('click',function(){
    var a = $('table#dwg_notes tr:last').clone(true);
    $('table#dwg_notes tr:last').after(a);  
      repnotes();  // ADD HERE
});

为了使用自己的autocomplete重新初始化输入，只有之前存在的输入仍然被初始化。新的似乎没有autocomplete绑定到他们。

我找到的唯一解决方法是删除函数repnotes()并且必须重新编写用于在页面加载时初始化自动完成的代码，并再次在“添加更多行”{{ 1}}但这效率不高。

有什么想法吗？

Answer 1

counter = 0;
$(function () {
    $(".ccnotes").each(function (index) {
        repnotes($(this));
    })
    $('a#more_notes').on('click', function () {
        var a = $('table#dwg_notes tr:last').clone(true);
        $('table#dwg_notes tr:last').after(a);
        repnotes(a);
    });
})

function repnotes(el) {
    var this_id = el.attr("id"); // current inputs id
    var new_id = parseInt(this_id) + (++counter); // a new id
    el.attr("id", new_id); // change to new id 
    el.autocomplete({
        source: function (request, response) {
            $.ajax({
                url: getBaseURL() + "inspection/ajax/notes_json.php",
                dataType: "json",
                data: {
                    note: request.term
                },
                success: function (data) {
                    $(".ccnotes #" + new_id).removeClass('ui-autocomplete-loading');
                    response($.map(data, function (item) {
                        return {
                            label: item.label
                        };
                    }));
                }
            });
        },
        select: function (event, ui) {
            $(this).val(ui.item.label);
            $(".ccnotes").removeClass('ui-autocomplete-loading');

        }
    }).data("autocomplete")._renderItem = function (ul, item) {

        return $("<li></li>").data("item.autocomplete", item).append("<a><strong>" + item.label + "</a>").appendTo(ul);

    };
}

Answer 2

想出来。在复制和重新初始化之前，我必须“destroy”自动完成：

$('a#more_notes').on('click',function(){
    $(".ccnotes").autocomplete("destroy");  /// ADD HERE
    var a = $('table#dwg_notes tr:last').clone(true);
    $('table#dwg_notes tr:last').after(a);  
    repnotes(); // initialize

});

现在我可以调用repnotes()函数没问题。

jQuery Autocomplete绑定动态元素

2 个答案: