Javascript innerHTML生成文本框的jQuery自动完成

我意识到类似的问题已经被问了数千次，但这似乎对我不起作用。我有一个名为“movieTitle”的文本框，它是通过Javascript点击按钮生成的。我在这个文本框上调用jQueryUI autocomplete，就像在官方示例中一样

如果我在原始页面中硬编码“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;

    }
}
}

});

$（函数（）
{   
$（文档）.on（'focus'，'movieTitle'，function（）{
//警惕（“哈哈哈”）；
$（“#电影字幕”）。自动完成({
来源：“../searchMovies.php”，
最小长度：2
});
}
);    
window.onload=main；
函数main（）
{
document.getElementById（“movieQuery”）.onclick=function（）{showForms（this.value）；}；
document.getElementById（“oscarQuery”）.onclick=function（）{showForms（this.value）；}；
//根据用户选择的单选按钮显示查询表单
函数显示窗体（str）
{
var=”；
如果（str==“电影”）
{
埃雷多克\
电影查询\
\
\
名称：\
\
\
\
';
//document.getElementById（“formsArea”）.innerHTML=herdoc；
//$（“#formsArea”）。追加（ERDEOC）；
$（#formsArea”）.html（herdeoc）；
}
否则如果（str==“奥斯卡”）
{
埃雷多克\
奥斯卡查询\
\
名称：\
\
\
';
document.getElementById（“formsArea”）.innerHTML=herdoc；
}
}
}
});

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>

电影查询
奥斯卡查询
请选择一个查询。

您应该检查发送AJAX请求的URL。脚本文件中的路径是相对于它们所显示的页面的。因此，尽管您的脚本位于

/web/scripts/javascripts/js.js

中，但当此文件包含在

/web/scripts/page.php

中时，指向

/web/scripts/searchMovies.php

的路径应该是

searchMovies.php

而不是

/searchMovies.php

，因为您的脚本正在

/web/scripts//searchMovies>中使用

避免这种混淆的好方法是

A.使用绝对URL

B与域的根目录（以
/
开头）相关的URL，

C或者在变量中定义域的路径，
var domain\u path='0http://www.mysite.com/“
并在脚本中使用它

我希望它能澄清一些事情：）

showForms（）
正在生成无效的HTML。
应该在
之前。试着换一下。这是在
if（str==“movie”）{
not catch:）里面的。但是仍然没有解决这个问题。它对我有效。你能发布
searchMovies.php
代码吗。它甚至尝试将ajax请求发送到
searchMovies.php
？检查ajax请求
源代码：“../searchMovies.php”中的正确路径，
在你的浏览器的调试工具中hah:D错误的URL。我认为生成的路径取决于生成ajax请求的路径，在你的情况下是
/web/scripts
。很好的答案…：）祝你好运…就像真正的邪恶在伪装…愚弄我修复已经正确的.on（）东西。。。