jQuery autocomplete for dynamically created inputs for ajax call

Question

I'm having an issue using jQuery autocomplete with dynamically created inputs (again created with jQuery). I can't get autocomplete to bind to the new inputs.

<script type="text/javascript">

        window.count = 0;
        if (!window.console) console = {log: function() {}};

        var autocomp_opt = {
                width: 300,
                max: 10,
                delay: 100,
                minLength: 1,
                autoFocus: true,
                cacheLength: 1,
                scroll: true,
                highlight: false,
                source: function(request, response) {
                    $.ajax({
                        url: "/test/JSON/PACS8Data",
                        dataType: "json",
                        data: request,
                        success: function( data, textStatus, jqXHR) {
                            console.log( data);
                            var items = data;
                            response(items);
                        },
                        error: function(jqXHR, textStatus, errorThrown){
                             console.log( textStatus);
                        }
                    });
                },
            };



            function addme () {
                window.count++;
                var text = $( "#hiddenDiv" ).html();

                text = replaceAll("XXYY", ""+window.count, text);
                $( "#appendText" ).append(text);
                $('.description', text).autocomplete(autocomp_opt);

            }

            function replaceAll(find, replace, str) {
                  return str.replace(new RegExp(find, 'g'), replace);
            }


    </script>


        <br />

        <div id="jsftextAjax" >
             <table>
                <tr>
                    <td>
                        <input id="autoText0" class="description" maxlength="20" />
                    </td>
                    <td>
                        <input id="valueText0" maxlength="20" />
                    </td>
                    <td>
                        <button id="add0" type="button" onclick="addme();">Add</button>
                    </td>
                </tr>
            </table>
        </div>
        <div id="appendText">

        </div>
        <div id="hiddenDiv" style="display:none;" >
            <table>
                <tr>
                    <td>
                        <input id="autoTextXXYY" class="description" maxlength="20" />
                    </td>
                    <td>
                        <input id="valueTextXXYY" maxlength="20" />
                    </td>
                    <td>
                        <button id="addXXYY" type="button" onclick="addme();">Add</button>
                    </td>
                </tr>
            </table>
        </div>

I'm aware that the problem is due to the content being created after the page has been loaded but I can't figure out how to get around it. I've read several related questions and come across the jQuery live method but I'm still in a jam!

Any advice?

Answer 1

Use the following snippet,

Remove text from $('.description').autocomplete(autocomp_opt);

function addme () {
    window.count++;
    var text = $( "#hiddenDiv" ).html();

    text = replaceAll("XXYY", ""+window.count, text);
    $( "#appendText" ).append(text);
    $('.description').autocomplete(autocomp_opt);

}

Working Demo

Note :

The autocomplete() code won't work for 1st set of textbox. for that include $('.description').autocomplete(autocomp_opt); in your $(document).ready(...)

Answer 2

$('.description', text).autocomplete(autocomp_opt); <-- You are looking at a string text as the context

You need to work of the elements that were added.

$( "#appendText" )
    .append(text)
    .find('.description')
        .autocomplete(autocomp_opt);

or

var elems = $(text);
$( "#appendText" ).append(elems);
elems.find('.description').autocomplete(autocomp_opt);