我已经阅读了很多关于此的帖子，但似乎没有一个对我有帮助。
我在第一页和第二页上的编码完全相同，它们位于同一目录中，但只有第一页加载了 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 未处理的第二个页面。
最佳答案
@user3234020, 您的代码有两 (2) 个问题。它们都是相关的。
- 当您创建
$table = $('table').tablesorter({时，该表仍未加载。所以很有可能 Javascript 没有看到它。所以，它默默地失败了，而不是执行。要解决这个问题，将代码移到页面底部。 - 您没有正确等待
'deviceready'事件。对于 Cordova/Phonegap，您必须在执行任何操作之前等待“设备就绪”事件；包括调用支持库
您需要的信息来自 Top Mistakes by Developers new to Cordova/Phonegap 的第 4 篇| .我引用:
4. In the code, did not listen for the 'deviceready' event.
This is listed MULTIPLE times in the documentation, and is include in every example where it is appropriate. It is still missed. Brian Ford - an Angular developer, points to the section of documentation we need.
This is a very important event that every Cordova application should use.
Cordova consists of two code bases: native and JavaScript. While the native code is loading, a custom loading image is displayed. However, JavaScript is only loaded once the DOM loads. This means your web application could, potentially, call a Cordova JavaScript function before it is loaded.
The Cordova deviceready event fires once Cordova has fully loaded. After the device has fired, you can safely make calls to Cordova function.
And in case you think this is minor, even veterans like Raymond Camden have forgotten this.
关于javascript - 只有第一页在 phonegap 中加载 javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32834207/