我意识到类似的问题已经被问了数千次，但它似乎对我不起作用。我有一个名为“movieTitle”的文本框，它是通过单击一个按钮通过 Javascript 生成的。我在该文本框上调用 jQueryUI 自动完成，就像在官方示例http://jqueryui.com/autocomplete/#remote中一样。
如果我在原始页面中硬编码“movieTitle”，效果会很好；但是，当我通过更改 div“formsArea”的 innerHTML 创建“movieTitle”时，它就失败了。searchMovies.php 与示例中的 search.php 相同。我从互联网和这里尝试了很多答案。我了解到我必须使用 .on() 来绑定动态元素“movieTitle”。仍然它似乎不起作用。甚至警报（“哈哈哈”）也有效。谢谢你的时间。:) 这是我的脚本：
$(function()
{
$(document).on('focus', '#movieTitle', function(){
//alert("hahaha");
$("#movieTitle").autocomplete({
source: "../searchMovies.php",
minLength: 2
});
}
);
window.onload = main;
function main()
{
document.getElementById("movieQuery").onclick = function(){showForms(this.value);};
document.getElementById("oscarQuery").onclick = function(){showForms(this.value);};
// displays query forms based on user choice of radio buttons
function showForms(str)
{
var heredoc = "";
if (str === "movie")
{
heredoc = '\
<h1>Movie Query</h1>\
<form action="processQuery.php" method="get">\
<div class="ui-widget">\
<label for="movieTitle"><strong>Name: </strong></label>\
<input type="text" id="movieTitle" name="movieTitle" />\
<input type="submit" name="submitMovie" value="Submit" />\
</div>\
</form>';
//document.getElementById("formsArea").innerHTML = heredoc;
//$("#formsArea").append(heredoc);
$("#formsArea").html(heredoc);
}
else if (str === "oscar")
{
heredoc = '\
<h1>Oscar Query</h1>\
<form action="processQuery.php" method="get">\
<strong>Name: </strong>\
<input type="text" name="oscarTitle" />\
<input type="submit" name="submitOscar" value="Submit"/>\
</form>';
document.getElementById("formsArea").innerHTML = heredoc;
}
}
}
});
HTML 是：
<form action=$scriptName method="get">
<label for="movieQuery"><input type="radio" name="query" id="movieQuery" value="movie" />Movie Query</label>
<label for="oscarQuery"><input type="radio" name="query" id="oscarQuery" value="oscar" />Oscar Query</label>
</form>
<div id="formsArea">
<b>Please choose a query.</b>
</div>