Question

我已经阅读了很多这方面的帖子，但似乎没有人帮助我。

我已经在第一页和第二页完全相同的编码，他们在同一目录，但只有第一页加载JavaScript。

这是第二页的代码。（与第一页相同，但第一页有此页面的链接，标题中没有反向链接）

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">




    <title>San Angelico Museum of Contemporary Art</title>
    <link rel="stylesheet"  href="css/jquery.mobile.min.css">
    <link rel="stylesheet"  href="css/style.css">


    <script src="js/jquery.js"></script>
    <script src="js/jquery.mobile.min.js"></script>
    <script src="js/app.js"></script>
    <script src="phonegap.js"></script>


    <script src="js/jquery.tablesorter.js"></script>
    <script src="js/widgets/widget-storage.js"></script>
    <script src="js/widgets/widget-filter.js"></script>

        <script id="js">$(function() {

    var $table = $('table').tablesorter({
        theme: 'blue',
        widgets: ["zebra", "filter"],
        widgetOptions : {
            // filter_anyMatch replaced! Instead use the filter_external option
            // Set to use a jQuery selector (or jQuery object) pointing to the
            // external filter (column specific or any match)
            filter_external : '.search',
            // add a default type search to the first name column
            filter_defaultFilter: { 1 : '~{query}' },
            // include column filters
            filter_columnFilters: false,
            filter_placeholder: { search : 'Search...' },
            filter_saveFilters : true,
            filter_reset: '.reset'
        }
    });
    // make demo search buttons work
    $('button[data-column]').on('click', function(){
        var $this = $(this),
            totalColumns = $table[0].config.columns,
            col = $this.data('column'), // zero-based index or "all"
            filter = [];

        // text to add to filter
        filter[ col === 'all' ? totalColumns : col ] = $this.text();
        $table.trigger('search', [ filter ]);
        return false;
    });

});</script>

    <script>
    $(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
); 
    </script>

</head>


<body>
<div data-role="page">

    <div data-role="header">

    <p><a href="index.html">back</a></p>

    </div>




    <div id="main" data-role="main" class="ui-content">

     <p>hello world</p>

        <div id="demo"><input class="search" type="search" data-column="all"> 






<table  data-role="table" id="tablepress" data-mode="columntoggle" class="tablesorter ui-responsive">
<thead>
<tr class="row-1 odd">
    <th class="column-1">#</th><th data-priority="1" class="column-2">Title</th><th class="column-3">Percent Filler</th>
</tr>
</thead>
<tbody class="row-hover">
<tr class="row-2 even">
    <td class="column-1">1</td><td class="column-2"><a href="/shows/naruto-shippuden/homecoming-2" rel="nofollow">Homecoming</a></td><td class="column-3"><div id="progress" class="graph"><div id="bar" style="width:100%"><p>100% Filler</p></div></div></td>
</tr>

</tbody>
</table>


    </div>



    <div data-role="footer">
        <div id="red"> <p>footer</p> </div>
    </div>


</div>

</body>
</html>

这是编码JS没有工作的第二页。

Answer 1

@ user3234020，您的代码有两（2）个问题。他们都是相关的。

创建$table = $('table').tablesorter({时，表仍未加载。所以很有可能Javascript没有看到它。所以，它默默地失败，而不是执行。要修复此问题，将代码移动到页面底部。
您没有正确等待'deviceready'事件。对于Cordova / Phonegap，您必须等待“设备准备”＆＃39;在你做任何事情之前的事件;包括调用支持库

您需要的信息来自Top Mistakes by Developers new to Cordova/Phonegap的＃4。我引用：

<强> 4。在代码中，没有听取'deviceready＆＃39;事件

这在文档中列出了多次，并且包含在适当的每个示例中。它仍然错过了。 Brian Ford - Angular开发人员，指向我们需要的section of documentation。

这是每个Cordova应用程序都应该使用的非常重要的事件。

Cordova由两个代码库组成：native和JavaScript。在加载本机代码时，会显示自定义加载图像。但是，只有在DOM加载后才会加载JavaScript。这意味着您的Web应用程序可能会在加载之前调用Cordova JavaScript函数。

一旦Cordova完全加载，Cordova deviceready事件就会触发。设备触发后，您可以安全地调用Cordova功能。

如果你认为这是次要的，甚至像Raymond Camden have forgotten this这样的退伍军人。

只有第一页在phonegap中加载javascript

1 个答案: