0

我在使用 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 方法，但我仍然陷入困境！

有什么建议吗？

4

2 回答 2

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);
于 2014-06-12T12:55:09.213 回答
0

使用以下代码段，

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

}

工作演示

笔记 ：

该autocomplete()代码不适用于第一组文本框。包括$('.description').autocomplete(autocomp_opt);在你的$(document).ready(...)

于 2014-06-12T12:58:16.103 回答