仅在第一个视图（第一页）上运行Javascript-jQuery Mobile_Javascript_Listview_Jquery Mobile_Mobile_Initialization

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

javascript listview jquery-mobile mobile

仅在第一个视图（第一页）上运行Javascript-jQuery Mobile,javascript,listview,jquery-mobile,mobile,initialization,Javascript,Listview,Jquery Mobile,Mobile,Initialization,firebug可能存在相关错误：。。。无法在初始化之前调用listview上的方法；试图调用方法“option” 我正在制作这个应用程序，它要求你输入某个“级别”的答案，然后进入下一个级别。答案在列表中，只应显示在与搜索完全匹配的位置。下面是我的前两页html和我的javascript，用于隐藏答案，直到提供完全匹配为止然而，它只在第一个视图（页面）上工作，而在第二、第三、第四等视图上不工作！我真的花了很长时间试图解决这个问题，我迷路了。到目前为止，唯一对我有效的是预回迁data=“true”

firebug可能存在相关错误：。。。无法在初始化之前调用listview上的方法；试图调用方法“option”

我正在制作这个应用程序，它要求你输入某个“级别”的答案，然后进入下一个级别。答案在列表中，只应显示在与搜索完全匹配的位置。下面是我的前两页html和我的javascript，用于隐藏答案，直到提供完全匹配为止

然而，它只在第一个视图（页面）上工作，而在第二、第三、第四等视图上不工作！我真的花了很长时间试图解决这个问题，我迷路了。到目前为止，唯一对我有效的是预回迁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>

而不是

$(function () {...

试着这样做：

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

pageinit在您第一次访问的每个页面初始化时运行一次。

而不是$（函数（）{}对每个页面使用pageinit（）因为ListView只有在您第一次访问每个页面时才会初始化。谢谢您的回复，但我对此有点陌生，不知道如何正确地实现它？我应该在脚本或每个页面中添加一些内容吗？我问了很多不同的人，包括一些“专家”并且尝试了很多不同的东西，您刚刚修复了它。对于在多页文档上运行特定重复元素的javascript似乎非常有用！

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