Question

我似乎无法理解为什么这个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>

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"
    });

Answer 1

您的脚本正在尝试从DOM访问#searchInput，同时仍在解析<head>（因此该元素尚未添加到DOM中）。

将脚本移动到您尝试操作的输入之后，或将其包装在DOM准备好或加载的函数中。

Answer 2

我创建了解决方案的小提琴 - 请参阅以下代码：

http://jsfiddle.net/LB4Je/

$(document).ready(function() {
    // your code goes hede
    // $("#searchInput").keyup ...
}

这是因为当你使用选择器$("#searchInput")时，dom元素还没有准备好。

Answer 3

您需要将代码放在文档就绪处理程序中，以确保在加载DOM后执行：

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

JQuery 1.8 ..没有按预期在网页上工作？

3 个答案: