CODEWITHSUNDEEP
javascriptjquery
Dan
Dan

Reputation: 2174

jquery autocompleter is not working for dynamically added textboxes

Here is a fiddle The jquery ui autocompleter is working on page load for first textbox, but after ading more textbox with same classname, then autocompleter is not working.

Can anyone help me please

$(document).ready(
    function(){
 var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC" 
    ];
         $( ".lang" ).autocomplete({
      source: availableTags
    });

        $('#addRow').click(
            function() {
                var curMaxInput = $('input:text').length;

                $('#rows li:first')
                    .clone()
                    .insertAfter($('#rows li:last'))
                    .find('input:text:eq(0)')
                    .attr({'id': 'ans' + (curMaxInput + 1),
                           'value': '',
                           'name': 'ans' + (curMaxInput + 1)
                          })
                    .parent()
                    .find('input:text:eq(1)')
                    .attr({
                        'id': 'ans' + (curMaxInput + 2),'value': '',
                        'name': 'ans' + (curMaxInput + 2)
                    });
                $('#removeRow')
                    .removeAttr('disabled');
                if ($('#rows li').length >= 5) {
                    $('#addRow')
                        .attr('disabled',true);
                }
                return false;
            });

        $('#removeRow').click(
            function() {
                if ($('#rows li').length > 1) {
                    $('#rows li:last')
                        .remove();
                }
                if ($('#rows li').length <= 1) {
                    $('#removeRow')
                        .attr('disabled', true);
                }
                else if ($('#rows li').length < 5) {
                    $('#addRow')
                        .removeAttr('disabled');

                }
                return false;
            });
    });

Upvotes: 0

Views: 41

Answers (1)

mucio
mucio

Reputation: 7119

When you add the new .lang element you don't associate the autocomplete to it too, because the binding is done only on document ready.

So I created a function like this and then called in document ready, but also in $('#addRow').click:

function addAutocomplete() {
    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC"];

    $(".lang").autocomplete({
        source: availableTags
    });
}
addAutocomplete();

I modified your code and create this fiddle. Hope this helps.

Upvotes: 1

Related Questions