jQuery 自动完成绑定(bind)动态元素

Question

我想做的是将自动完成绑定(bind)到新添加的输入。这是我的编码方式:

<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);  
});

并且已添加一个新的表格行及其自己的输入。

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

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
});

为了使用自己的自动完成重新初始化输入，只有之前存在的输入保持初始化。新的似乎没有绑定(bind)自动完成。

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

有什么想法吗？

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);

    };
}