仅在第一视图（第一页）上运行的Javascript-jQuery Mobile

Question

Possible related error from firebug: ... Cannot call methods on listview prior to initialization; 萤火虫可能引起的相关错误：...无法在初始化之前在listview上调用方法； attempted to call method 'option' 试图调用方法“选项”

I am making this app that requires you to type the answer of a certain ´level´ to go to the next one. 我正在制作此应用程序，要求您键入某个“级别”的答案才能转到下一个答案。 The answer is in a list and should only display on exact match for the search. 答案在列表中，并且只应显示与搜索完全匹配的内容。 Below is my html for the first two pages and my javascript for hiding the answer untill exact match is provided. 下面是我的前两页的html和我的javascript，用于隐藏答案直到提供完全匹配为止。

However it ONLY works on the first view (page) and doesn´t work on the second, third, fourth and so on! 但是，它仅在第一个视图（页面）上起作用，而在第二，第三，第四等等上不起作用！ I really spent a loooong time trying to fix this and I am lost. 我真的花了很长时间试图解决这个问题，但我迷路了。 The only thing that worked for me so far was a prefetch-data="true", but it only works to some extent and stops working after page 3. Other then that I´ve tried to implement many solutions I found here and there but none do what I want. 到目前为止，对我来说唯一有效的方法是prefetch-data =“ true”，但是它只能在某种程度上起作用，并在第3页之后停止工作。除此之外，我还试图实现在此找到的许多解决方案，但是我没有想要的。 I hope there is some simple thing I am doing wrong. 我希望我做错了一些简单的事情。

Why does the script only run on the first view and how do I fix it? 为什么脚本仅在第一个视图上运行，如何解决？

<!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 BELOW 下方的Java脚本

exactMatch = function( text, searchString ) {
    return !( text.toLowerCase() == searchString );
    };
$(function () {
    $(".whatever").listview('option', 'filterCallback', exactMatch);
});

}

Answer 1

Instead of 代替

$(function () {...

Try something like this: 尝试这样的事情：

$(document).on( "pageinit", function( e ) {    
    $(e.target).find(".whatever").listview('option', 'filterCallback', exactMatch);
});

pageinit runs once as each page you visit is initialized for the first time. pageinit运行一次，因为您访问的每个页面都是首次初始化。

仅在第一视图（第一页）上运行的Javascript-jQuery Mobile

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-02-10 15:00:30

仅在第一视图（第一页）上运行的Javascript-jQuery Mobile

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-02-10 15:00:30

解决方案1
0 已采纳 2015-02-10 15:00:30