克隆输入字段时自动完成功能不起作用


Autocomplete not working when cloning an input field

我正在克隆一个具有自动完成类的表上的输入字段。当我克隆字段时,我没有问题。问题是,在克隆的字段中,自动完成不起作用(在未克隆的字段上,它起作用)。我的自动完成代码是这样的:

$(document).ready(function() {
        $('#btnAdd').click(function() {
            var num     = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
            var newNum  = new Number(num + 1);      // the numeric ID of the new input field being added
            // create the new element via clone(), and manipulate it's ID using newNum value
            var newElem = $('#input' + num).clone().prop('id', 'input' + newNum);

           newElem.find(':input').each(function() {
          var name = $(this).attr('name').replace(/'d+$/, '');
            $(this).prop({id: name + newNum, name: name + newNum}).val("");

        });             
            // insert the new element after the last "duplicatable" input field
            $('#input' + num).after(newElem);
            // enable the "remove" button
            $('#btnDel').prop('disabled','');
            // business rule: you can only add 15 names
            if (newNum == 15)
                $('#btnAdd').prop('disabled','disabled');
        });
        $('#btnDel').click(function() {
            var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
            $('#input' + num).remove();     // remove the last element
            // enable the "add" button
            $('#btnAdd').prop('disabled','');
            // if only one element remains, disable the "remove" button
            if (num-1 == 1)
                $('#btnDel').prop('disabled','disabled');
        });
        $('#btnDel').prop('disabled','disabled');
    });

我的自动完成代码是:

var autoc = {
        source: "lib/search.php",
        minLength: 1,
        select: function( event, ui ) {
            log( ui.item ?
                "Selected: " + ui.item.value + " aka " + ui.item.id :
                "Nothing selected, input was " + this.value );
                    }   
                };
                var renderItem = function( ul, item ) {
                      return $( "<li></li>" )
                  .data( "item.autocomplete", item )
                   .append( "<a style='height:75px; text-align:center; font-weight:bold;'>"+ item.label + "</a>" )
                   .appendTo( ul );
               };   
               $(".member").each(function (i) {
                $(this).autocomplete(autoc).data("autocomplete")._renderItem = renderItem;
        });

我一直试图通过将自动完成代码放在克隆代码中来修复它,我不确定我做错了什么。如果有人能帮忙就太好了!谢谢

在自动完成字段被克隆后,您必须重新初始化它。我认为把它包装在.live()中也是必要的

我的解决方案是这样的:

$('#my_clone_button').live('click',function() {
    my_clone_script; #this is my function to clone
    $('select your new cloned input').each(function() {
        $(this).autocomplete('destroy');
        enable_autocomplete($(this), json_url); #this is my function to initialize autocomplete
    });
});

尝试传递true的$('#input' + num).clone(true),这会告诉克隆也要复制事件和数据。这意味着它将复制输入是一个自动完成字段。