Javascript JQuery 1.8。。未按预期处理网页？_Javascript_Jquery_Html

Javascript JQuery 1.8。。未按预期处理网页？

javascript jquery html

Javascript JQuery 1.8。。未按预期处理网页？,javascript,jquery,html,Javascript,Jquery,Html,我似乎无法理解为什么JQuery代码不起作用。我曾在另一个HTML页面上尝试过这一点，但它在早期版本的JQuery上工作。但是当我尝试使用这个版本的JQuery时，它似乎不起作用。你知道为什么这不起作用吗 HTML: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.j

我似乎无法理解为什么JQuery代码不起作用。我曾在另一个HTML页面上尝试过这一点，但它在早期版本的JQuery上工作。但是当我尝试使用这个版本的JQuery时，它似乎不起作用。你知道为什么这不起作用吗

HTML:

 <!DOCTYPE html>
    <html>
    <head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
     <script type="text/javascript" src="box.js"></script>

    </head>
    <body>
    <input id="searchInput" value="Type To Filter">
    <br/>
    <table>
        <thead>
            <tr>
                <th>Column1</th>
                <th>Column2</th>
            </tr>
        </thead>
        <tbody id="fbody">
            <tr>
                <td>cat</td>
                <td>one</td>
            </tr>
            <tr>
                <td>dog</td>
                <td>two</td>
            </tr>
            <tr>
                <td>cat</td>
                <td>three</td>
            </tr>
            <tr>
                <td>moose</td>
                <td>four</td>
            </tr>
            <tr>
                <td>mouse</td>
                <td>five</td>
            </tr>
            <tr>
                <td>dog</td>
                <td>six</td>
            </tr>
        </tbody>
    </table>
    </body>
    </html>




专栏1
专栏2
猫
一
狗
二
猫
三
驼鹿
四
老鼠
五
狗
六

JQuery：

 $("#searchInput").keyup(function () {
        //split the current value of searchInput
        var data = this.value.split(" ");
        //create a jquery object of the rows
        var jo = $("tbody").find("tr");
        if (this.value == "") {
            jo.show();
            return;
        }
        //hide all the rows
        jo.hide();

        //Recusively filter the jquery object to get results.
        jo.filter(function (i, v) {
            var $t = $(this);
            for (var d = 0; d < data.length; ++d) {
                if ($t.is(":contains('" + data[d] + "')")) {
                    return true;
                }
            }
            return false;
        })
        //show the rows that match.
        .show();
    }).focus(function () {
        this.value = "";
        $(this).css({
            "color": "black"
        });
        $(this).unbind('focus');
    }).css({
        "color": "#C0C0C0"
    });

$（“#搜索输入”）.keyup（函数（）{
//拆分searchInput的当前值
var数据=此.value.split（“”）；
//创建行的jquery对象
var jo=$（“tbody”）.find（“tr”）；
如果（this.value==“”）{
jo.show（）；
返回；
}
//隐藏所有行
jo.hide（）；
//循环过滤jquery对象以获得结果。
jo.filter（函数（i，v）{
var$t=$（本）；
对于（变量d=0；d

您的脚本试图从DOM访问

#searchInput

，而

仍在解析中（因此元素尚未添加到DOM）

将脚本移动到您试图操作的输入之后，或者将其包装到在DOM ready或load上运行的函数中。

我创建了一个解决方案-请参阅以下代码：

这是因为当您使用选择器

$（“#searchInput”）

时，dom元素尚未就绪。您需要将代码放置在文档就绪处理程序中，以确保在加载dom后执行：

$(function() {
    // your code here...
});

您的代码是否在文档就绪处理程序中？例如

$（函数（）{/*您的代码*/}）@Rorymcrossan这起作用了。添加为answer@user3374238昆汀已经回答了it@user3374238谢谢，我已经添加了它作为答案。
$(function() {
    // your code here...
});