Fatal编程技术网
  • jquery/
  • jquerymobilepagecreate不'；不要在重新访问页面时开火

jquerymobilepagecreate不'；不要在重新访问页面时开火

jquery html jquery-mobile

jquerymobilepagecreate不'；不要在重新访问页面时开火,jquery,html,jquery-mobile,Jquery,Html,Jquery Mobile,下面是我的场景：我正在为嵌入式系统用户界面构建一个web应用程序。我计划使用jQuery Mobile，因为它非常灵活。我有一个单页每个文件的模式正在进行。我有一个名为processinputs.html的文件，如下所示。它所做的只是通过选择频道号的查询参数将您导航到input.html 问题是：我第一次从processinputs.html转到inputs.html时，I=3，一切都很好。标题和链接被修改。尽管如此，如果我返回processinputs.html并再次单击第三个输入链接，事件不

下面是我的场景：我正在为嵌入式系统用户界面构建一个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>


过程输入
选择一个输入
高级设计G13项目

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>


$（'.inputPage'）.live（'pagecreate'，函数（事件，ui）{
var inum=$.urlParam（'i'）；
$（'#Input itle'）.text（'过程输入'+inum）；
$（'#eqLink'）.attr（'href'，'eq.html？i='+inum）
});
//$（'div'）.live（'pagehide'，函数（事件，用户界面）{
//var page=jQuery（event.target）；
//如果（page.attr（'data-cache'）=='never'）{
//page.remove（）；
//       };   
//     });
选择一个。
高级设计G13项目
每个页面的所有JavaScript都应该在根页面（index.html或您先加载的页面）

每个页面的所有JavaScript都应该在根页面（index.html或您先加载的页面）太棒了！成功了。天哪简单的事情。如果用户直接访问
/input.html？i=2
？@cherouvim，您需要检查jQM，然后：（jQM未加载）（jQM已加载）