Автозаполнение не работает при клонировании поля ввода - PullRequest
Новая
       16

Автозаполнение не работает при клонировании поля ввода

2 голосов
/ 19 января 2012

Я клонирую поля ввода в таблице с классом автозаполнения. Когда я клонирую поля, у меня нет проблем. Проблема в том, что в клонированных полях автозаполнение не работает (на том, которое не клонировано, оно работает). Мой код автозаполнения такой: 

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

Я пытался исправить это, поместив код автозаполнения в код клона. Я не уверен, что я делаю неправильно. Было бы здорово, если бы кто-нибудь мог помочь! Спасибо!

Ответы [ 2 ]

1 голос
/ 19 января 2012

Вы должны повторно инициализировать поле автозаполнения после его клонирования.И я думаю, что обернуть его в .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
    });

});
0 голосов
/ 19 января 2012

try $('#input' + num).clone(true) передача true говорит клону также копировать события и данные.Это означает, что будет скопировано, что ввод является полем автозаполнения.

...