Question

我正在克隆具有自动完成类的表上的输入字段。当我克隆字段时我没有问题。问题是在克隆字段中，自动完成功能不起作用（在未克隆的字段上它确实有效）。我的自动填充代码是：

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

我一直试图通过将自动完成代码放在克隆代码中来修复它，我不知道我做错了什么。如果有人可以帮忙的话会很棒！谢谢！

Answer 1

克隆后，您必须重新初始化自动填充字段。我认为在.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
    });

});

Answer 2

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

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

2 个答案: