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

jQuery autocomplete for dynamically created inputs for ajax call

本文关键字：动态 调用 创建 输入 ajax jQuery      更新时间：2023-09-26

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

任何建议吗?

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

使用下面的代码片段

从$('.description').autocomplete(autocomp_opt);中移除text 

function addme () {
    window.count++;
    var text = $( "#hiddenDiv" ).html();
    text = replaceAll("XXYY", ""+window.count, text);
    $( "#appendText" ).append(text);
    $('.description').autocomplete(autocomp_opt);
}
演示工作

注释:

autocomplete()代码将不工作的第一组文本框。在$(document).ready(...)

中包含$('.description').autocomplete(autocomp_opt);
相关文章：