[英]JQuery/Javascript only execute the first condition (In a visualforce page with apex:outputpanel)
[英]Javascript only running on first view (first page) - jQuery Mobile
螢火蟲可能引起的相關錯誤:...無法在初始化之前在listview上調用方法; 試圖調用方法“選項”
我正在制作此應用程序,要求您鍵入某個“級別”的答案才能轉到下一個答案。 答案在列表中,並且只應顯示與搜索完全匹配的內容。 下面是我的前兩頁的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>
下方的Java腳本
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運行一次,因為您訪問的每個頁面都是首次初始化。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.