Question

我意识到类似的问题已被问过几千次，但它似乎对我不起作用。我有一个名为“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>

Answer 1

您应该检查您要向其发送AJAX请求的网址。脚本文件中的路径与它们显示的页面相关。虽然您的脚本位于/web/scripts/javascripts/js.js，但当/web/scripts/page.php中包含此文件时，/web/scripts/searchMovies.php的路径应该是searchMovies.php ../searchMovies.php代替/web/scripts/，因为您的脚本正在/中使用避免这种混淆的好方法是一个。使用绝对URL
湾相对于您网域的根目录的网址（以var domain_path = 'http://www.mysite.com/'开头），
C。或者在变量{{1}}中定义域的路径，并在脚本中使用它。

我希望它澄清事情:)

Relative Paths in Javascript in an external file

内部HTML生成的文本框的jQuery自动完成

1 个答案: