如何将 jquery ui 自动完成添加到 jQuery 1.10 中动态创建的元素？答案

【问题标题】：How can I add jquery ui autocomplete to a dynamically created element in jQuery 1.10?如何将 jquery ui 自动完成添加到 jQuery 1.10 中动态创建的元素？
【发布时间】：2014-01-21 10:01:32
【问题描述】：

这几乎是this 问题的逐字帖子。然而，一旦你切换到 jQuery 1.10，代码就不再工作了。

我确实将调用更改为“live”方法，并将其切换为使用较新的“on”方法。我还需要做什么来解决此问题http://jsfiddle.net/sacredfaith/6t74T/458/？

$(function() {
var options = {
    source: [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
        ],
    minLength: 2
};

$(document.body).on("keydown.autocomplete", "input.searchInput",function(){
    $(this).autocomplete(options);
});

var addInput = function() {
    var inputHTML = " <input name='search' value='' class='searchInput' maxlength='20' />";
    $(inputHTML).appendTo("form#myForm");        
    $("input.searchInput:last").focus();
};

if (!$("form#myForm").find("input.searchInput").length) {
    addInput();
}

$("input#addButton").click(addInput);
});

到目前为止，我的搜索已经产生了使用已弃用的 jquery 库的方法。我需要更新的版本，但在过去几个小时的工作中一直未能成功...

编辑：更新小提琴链接和代码以反映“关于”语法更改。
EDIT2：感谢大家的耐心等待。

参考：对于 1.10 解决方案，请参阅所选答案的 cmets 中的小提琴，否则使用 1.9，请直接参阅所选答案中的小提琴。

【问题讨论】：

你在这里没有使用委托，语法略有不同，请检查文档，例如相当于 live() 是：$(document).on("focus","input.searchInput", function() {...});
@sacredfaith：您可以在一行中完成这一切，无需委托。请看下面我的回答。

标签： javascript jquery jquery-ui

【解决方案1】：

 $(document).on('focus', "input.searchInput", function() {
    $(this).autocomplete(options);
});

http://jsfiddle.net/6t74T/459/

【讨论】：

抱歉，您的小提琴在我的浏览器中无法使用（Chrome 版本 31）

【解决方案2】：

您没有包含jquery ui 库，并且还像这样将它用于动态元素

$(document.body).on('focus', 'input.searchInput' ,function(){
    $(this).autocomplete(options);
});

FIDDLE

【讨论】：

所以...没有办法使用 jQuery 1.10 做到这一点？
你只需要包含jquery ui，即使是jQuery 1.10。看到这个FIDDLE
我不太了解 jQuery 1.10，但这不会在每次输入焦点时创建一个新的自动完成小部件吗？

【解决方案3】：

您可以在一行中完成所有操作。工作DEMO

 var addInput = function() {
    $("<input name='search' value='' class='searchInput' maxlength='20' />").appendTo("form#myForm").end().autocomplete(options).focus();
  };

if (!$("form#myForm").find("input.searchInput").length) {
    addInput();
}

$("input#addButton").click(addInput);
});

【讨论】：

这与汤姆的建议非常相似。感谢您的帮助！
类似，但更快。您不需要查询最后一个输入的 dom，最后一个输入已经是您的 addInput 函数创建和附加的那个。 ;)

【解决方案4】：

autocomplete 创建一个新的小部件，附加到给定的元素，所以你只需要每次输入调用它一次，而不是每次按下键。因此，您可以删除整个代码块，只需在您的addInput 函数中调用autocomplete。

我已经更新了your fiddle（还添加了 jqueryUI JS 和 CSS）

var addInput = function() {
    var inputHTML = " <input name='search' value='' class='searchInput' maxlength='20' />";
    $(inputHTML).appendTo("form#myForm");        
    $("input.searchInput:last").autocomplete(options).focus();
};

【讨论】：