如何将 jquery ui 自动完成添加到动态创建的元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6670918/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I add jquery ui autocomplete to a dynamically created element?
提问by Eric Belair
I'm trying to get jQueryUI AutoComplete to trigger on dynamically created form input elements, but it's not working. I've tried using keyup.autocomplete and keydown.autocomplete as bind events in $.live(), but it's binding to the new elements - only those already on the page.
我试图让 jQueryUI AutoComplete 在动态创建的表单输入元素上触发，但它不起作用。我试过在 $.live() 中使用 keyup.autocomplete 和 keydown.autocomplete 作为绑定事件，但它绑定到新元素 - 只有那些已经在页面上的元素。
Try out the code here(try typing "ava" in the first input, then click "Add an Input" and type the same in the new input).
试试这里的代码（尝试在第一个输入中键入“ava”，然后单击“添加一个输入”并在新输入中键入相同的内容）。
JavaScript:
JavaScript：
$(function() {
$("input#addButton").click(function() {
$("input.searchInput:last").clone(true).appendTo($(this).closest("form"));
$("input.searchInput:last").val("");
})
$("input.searchInput").live("keydown.autocomplete", function() {
$(this).autocomplete({
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
});
})
});
HTML:
HTML：
<form name="myForm" method="post">
<input id="addButton" name="addButton" type="button" value="Add an input" />
<input name="search" value="" class="searchInput" maxlength="20" />
</form>
回答by Andrei
Function .live() is deprecated now.
函数 .live() 现在已弃用。
Looks like code like this works:
看起来像这样的代码有效：
var options = {
source: ["ActionScript", "AppleScript"],
minLength: 2
};
var selector = 'input.searchInput';
$(document).on('keydown.autocomplete', selector, function() {
$(this).autocomplete(options);
});
回答by Eric Belair
This works:
这有效：
$(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
};
$("input.searchInput").live("keydown.autocomplete", 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);
});<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<form id="myForm" name="myForm" method="post">
<input id="addButton" name="addButton" type="button" value="Add an input" />
</form>