Question

我有这个html页面，它按计划运行：

<!DOCTYPE html>
<html>
<head>
    <title>jQM Autocomplete</title>
    <meta content="initial-scale=1, maximum-scale=1, user-scalable=0" name="viewport" />
    <meta name="viewport" content="width=device-width" />
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />

    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <script src="jqm.autoComplete-1.5.2.js"></script>
    <script src="code.js"></script>
</head>

<body>

    <div data-role="page" id="mainPage">

        <div data-role="header">
        </div>

        <div data-role="content">

            <p>
                <input type="text" id="searchField" placeholder="Categories">
                <ul id="suggestions" data-role="listview" data-inset="true"></ul>
            </p>

        </div>

    </div>

    <script>

        $("#mainPage").bind("pageshow", function(e) {

            var data = ['C', 'Clojure', 'Jenny!', 'Java', 'Scala', 'Objective-C', 'C++', 'PHP', 'C#', '(Visual) Basic', 'Python', 'Perl', 'JavaScript', 'Ruby', 'Visual Basic .NET', 'Transact-SQL', 'Lisp', 'Pascal', 'Bash', 'PL/SQL', 'Delphi/Object Pascal', 'Ada', 'MATLAB'];

            $("#searchField").autocomplete({
                target: $('#suggestions'),
                source: data,
                link: 'target.html?term=',
                minLength: 1,
                matchFromStart: false
            });
        });
    </script>

</body>
</html>

我正在尝试将脚本标记之间的部分放入名为listview.js的文件中，并用以下内容替换脚本标记之间的内容：

      $(function() {
  initialize_listview();
  });

所以我目前在listview.js中的功能看起来像，但它不起作用：

function initialize_listview() {

$("#mainPage").bind("pageshow", function(e) {

            var data = ['C', 'Clojure', 'Jenny!', 'Java', 'Scala', 'Objective-C', 'C++', 'PHP', 'C#', '(Visual) Basic', 'Python', 'Perl', 'JavaScript', 'Ruby', 'Visual Basic .NET', 'Transact-SQL', 'Lisp', 'Pascal', 'Bash', 'PL/SQL', 'Delphi/Object Pascal', 'Ada', 'MATLAB'];

            $("#searchField").autocomplete({
                target: $('#suggestions'),
                source: data,
                link: 'target.html?term=',
                minLength: 1,
                matchFromStart: false
            });
        });

}

任何人都可以为我修复它，所以它的工作原理就像它们都在同一个文件中一样吗？谢谢。我知道我必须把：

<script src="listview.js"></script>

在我的标题中。

Answer 1

将script标记放在页面底部。在页面加载完成之前，它正在加载并立即运行。尚未将#mainpage解析为DOM，因此脚本无法找到它。通过将script标记放在页面底部，您可以确保在脚本运行之前整个页面已完成加载，并且您的javascript代码将能够找到所需的所有页面元素。 / p>

Answer 2

您已将代码挂钩两次（针对两个不同的事件）... initialize_listview()与document.ready事件相关联，而initialize_listview内的代码正在挂钩直到页面显示事件......

尝试此操作，用以下内容替换脚本标记之间的内容：

$("#mainPage").bind("pageshow", function(e) {
    initialize_listview();
}

并在listview.js

中

function initialize_listview() {
    var data = ['C', 'Clojure', 'Jenny!', 'Java', 'Scala', 'Objective-C', 'C++', 'PHP', 'C#', '(Visual) Basic', 'Python', 'Perl', 'JavaScript', 'Ruby', 'Visual Basic .NET', 'Transact-SQL', 'Lisp', 'Pascal', 'Bash', 'PL/SQL', 'Delphi/Object Pascal', 'Ada', 'MATLAB'];

        $("#searchField").autocomplete({
            target: $('#suggestions'),
            source: data,
            link: 'target.html?term=',
            minLength: 1,
            matchFromStart: false
        });
}

我试图将我的jquery代码与html分开，但它不起作用

2 个答案: