Question

以下是我的场景：我正在为嵌入式系统用户界面构建Web应用程序。我打算使用jQuery Mobile，因为它非常光滑。我的每个文件模式都有一个页面。我有一个名为processinputs.html的文件，如下所示。它所做的只是导航到input.html，并使用查询参数选择频道编号。

问题：我第一次从processinputs.html转到inputs.html？i = 3一切都很好。标题和链接被修改。虽然，如果我回到processinputs.html并再次点击第三个输入链接，事件不会被触发，因此我的标题不会更新。

我假设这与AJAX加载缓存页面有关，因此不会触发“pagecreate”事件。我也试过“pageinit”和“pagebeforecreate”。在我的project.js文件中，我试图禁用domCache和ajax，但它似乎没有工作。你会看到我在processinputs.html上为输入1硬编码“rel = external”。每次都有效，但是由于ajax加载和动画，jQMobile真的很酷。如果你可以帮我弄清楚如何绕过缓存我会非常感激。

$(document).bind("mobileinit", function(){
$.mobile.ajaxLinksEnabled=false;
$.mobile.ajaxFormsEnabled=false;
$.mobile.ajaxEnabled=false;
$.mobile.page.prototype.options.domCache = false;

}）;

现在为承诺的processinputs.html

<html>
<head>
    <link rel="stylesheet" href="css/jquery.mobile-1.0rc2.css" />
    <link rel="stylesheet" href="css/styles.css" />
    <script src="js/jquery.min.js"></script>
    <script src="js/project.js"></script>
    <script src="js/jquery.mobile-1.0rc2.js"></script>

    <meta name="viewport" content="width=default-width, initial-scale=1" />
</head>
<body>
    <div data-role="page" data-add-back-btn="true" data-cache="never">
        <div data-role="header" data-position="inline">
            <div class="topTitle">Process Inputs</div>
            <a href="index.html" data-icon="home" class="jqm-home ui-btn-right ui-btn-corner-all ui-btn-down-f ui-btn-up-f" title="home">Home</a>
        </div><!--  header -->

        <div data-role="content">   
            <div class="instructionText">Select an input</div>

            <div>  <!-- Container around button options -->
                <a href="input.html?i=1" data-role="button" rel='external'>Input 1</a>
                <a href="input.html?i=2" data-role="button">Input 2</a>
                <a href="input.html?i=3" data-role="button">Input 3</a>
                <a href="input.html?i=4" data-role="button">Input 4</a>
                <a href="input.html?i=5" data-role="button">Input 5</a>
                <a href="input.html?i=6" data-role="button">Input 6</a>
                <a href="input.html?i=7" data-role="button">Input 7</a>
                <a href="input.html?i=8" data-role="button">Input 8</a>
            </div>
        </div><!-- /content -->

        <div data-role="footer">
            <div class="footerText">A Senior Design G13 Project</h4>
        </div><!-- /footer -->

    </div><!-- /page -->
</body>

input.html接受查询参数并使用它来修改input.html的标题以及页面上三个链接的查询参数。代码如下所示：

    <link rel="stylesheet" href="css/jquery.mobile-1.0rc2.css" />
    <link rel="stylesheet" href="css/styles.css" />
    <script src="js/jquery.min.js"></script>
    <script src="js/project.js"></script>

    <script type="text/javascript">
        $('.inputPage').live('pagecreate', function (event, ui) {
            var inum = $.urlParam('i');
            $('#inputTitle').text('Process Input ' + inum);
            $('#eqLink').attr('href','eq.html?i=' + inum)
        });

        // $('div').live('pagehide', function(event, ui){
        //       var page = jQuery(event.target);
        //       if(page.attr('data-cache') == 'never'){
        //         page.remove();
        //       };   
        //     });
    </script>
    <script src="js/jquery.mobile-1.0rc2.js"></script>
</head>
<body>
    <div data-role="page" data-add-back-btn="true" data-cache="never" class="inputPage">
        <div data-role="header" data-position="inline">
            <div class="topTitle" id="inputTitle"></div>
            <a href="index.html" data-icon="home" class="jqm-home ui-btn-right ui-btn-corner-all ui-btn-down-f ui-btn-up-f" title="home">Home</a>
        </div><!--  header -->

        <div data-role="content">   
            <div class="instructionText">Select one.</div>

            <div>  <!-- Container around button options -->
                <a href="eq.html?i=" id="eqLink" data-role="button">Equalization</a>
                <a href="comp.html?i=2" id="compLink" data-role="button">Compression</a>
                <a href="lim.html?i=3" id="limLink" data-role="button">Limiting</a>
            </div>
        </div><!-- /content -->

        <div data-role="footer">
            <div class="footerText">A Senior Design G13 Project</h4>
        </div><!-- /footer -->

    </div><!-- /page -->
</body>

Answer 1

每个页面的所有JavaScript都应位于根页面（index.html或您首先加载的页面）

jQuery Mobile pageCreate不会在页面重新访问时触发

1 个答案: