Question

我在使用带有动态创建输入的jQuery自动完成时遇到问题（再次使用jQuery创建）。我无法自动完成绑定到新输入。

<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>

我知道问题是由于在加载页面后创建的内容，但我无法弄清楚如何绕过它。我已经阅读了几个相关的问题并遇到了jQuery live方法，但我仍然处在堵塞状态！

有什么建议吗？

Answer 1

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

您需要处理已添加的元素。

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

或

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

Answer 2

使用以下代码段

从text

中删除$('.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

注意：

autocomplete()代码不适用于第一组文本框。其中包括$('.description').autocomplete(autocomp_opt);

中的$(document).ready(...)

jQuery自动完成动态创建的ajax调用输入

2 个答案: