只在第一视图(第一页)上运行的Javascript - jQuery Mobile
问题描述:
从萤火虫可能的相关错误:...在初始化之前无法在列表视图上调用方法;试图调用方法'选项'只在第一视图(第一页)上运行的Javascript - jQuery Mobile
我正在做这个程序,需要你输入一个'水平'的答案去下一个。答案在列表中,只应显示在搜索的完全匹配。下面是我的前两页的HTML和我的JavaScript隐藏答案,直到提供完全匹配。
然而,它只适用于第一个视图(页面),不适用于第二,第三,第四等!我真的花了很长时间试图解决这个问题,我迷路了。到目前为止,唯一对我有用的是prefetch-data =“true”,但它只在某种程度上起作用,并在第3页后停止工作。其他则是我试图实现许多解决方案,但我在这里和那里找到了,但没有人做我想要的。我希望我做错了一些简单的事情。
为什么脚本只能在第一个视图上运行,我该如何解决?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>PARestaurant</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="style" href="images">
<style type="text/css"></style>
<script src="js/initOptions.js"></script>
<script src="js/messages.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<!-- Page Index
Home Page
Level Two
Level Three
Level Four
-->
<!-- -----------------------------------------------------------Home Page----------------------------------------------------------- -->
<div data-role="page" id="232114125125124124" data-theme="b">
<div data-role="header" data-theme="a" align="center">
<h1>Star Riddle</h1>
</div>
<div data-role="content" align="center">
<div data-role="collapsible">
<h2>Ready when you are!</h2>
<div>
<ul class="whatever" data-role="listview" data-filter="true"
data-filter-reveal="true" data-inset="true"
data-filter-placeholder="">
<li data-filtertext="Green"><a href="#32432532462362345325235235">You are a genius!</a></li>
</ul>
</div>
</div>
<div id="blue"></div> <h2>+</h2> <div id="yellow"></div>
</div>
<div data-role="footer" align="center">
<h1>Level 1</h1>
</div>
</div>
<!-- -----------------------------------------------------------Level Two----------------------------------------------------------- -->
<div data-role="page" id="32432532462362345325235235" data-theme="b">
<div data-role="header" data-theme="a" align="center">
<h1>Star Riddle</h1>
</div>
<div data-role="content" align="center">
<div data-role="collapsible">
<h2> You know what to do! </h2>
<div>
<ul class="whatever" data-role="listview" data-filter="true" data-filter-reveal="true" data-inset="true" data-filter-placeholder="">
<li data-filtertext="Level 1"><a href="#232114125125124124">Click me to go back!</a></li>
<li data-filtertext="Level 3"><a href="#534264363464327327">Up you go!</a></li>
<li data-filtertext="Level 4">You have to struggle a bit</li>
<li data-filtertext="Level 5">Not so fast</li>
<li data-filtertext="Level 6">No No NO!</li>
<li data-filtertext="Level 7">Stop it...</li>
</ul>
</div>`enter code here`
<div><p>Where do you wanna go?<p></div>
</div>
</div>
<div data-role="footer" align="center">
<h1>Level 2</h1>
</div>
</div>
JAVASCRIPT低于
exactMatch = function(text, searchString) {
return !(text.toLowerCase() == searchString);
};
$(function() {
$(".whatever").listview('option', 'filterCallback', exactMatch);
});
}
答
而不是
$(function() {...
尝试是这样的:
$(document).on("pageinit", function(e) {
$(e.target).find(".whatever").listview('option', 'filterCallback', exactMatch);
});
pageinit运行一次,因为每次访问的第一个初始化页面时间。
+0
我问了很多不同的人,包括一些“专家”并尝试了很多不同的东西,你只是修复它。似乎非常有用的运行JavaScript多页文档上的特定重复元素! – Psyduck 2015-02-10 16:32:37
而不是$(function(){}为每个页面(http://api.jquerymobile.com/1.3/pageinit/)使用pageinit,因为直到您第一次访问每个页面时,列表视图才会初始化。 – ezanker 2015-02-09 21:52:22
你的回复,但我有点新,并不知道如何正确实施这个?我应该只是添加一些东西到我的脚本或每个页面? – Psyduck 2015-02-10 08:47:39