0

我正在使用基于多页 html 文件的 Jquery/mobile 开发 Phonegap 应用程序，使用固定标题作为标题，使用固定页脚作为带有按钮的工具栏。这个想法是，通过单击页脚上的前进/后退按钮，用户移动几个步骤，刷新每个页面中的数据块，因此他们可以在该特定步骤的不同“块”之间来回滑动。

在解决了大部分松散的问题后，我一直在整理我的代码，将用于处理按钮的 JQuery 提取到单独的函数中，然后我在每个子页面显示时调用 AIUI。问题是，既然我已经这样做了，我的前进/后退按钮似乎只在第一页上工作。有什么想法我可能会出错吗？

相关html：

<body onload="onBodyLoad()">

<div data-role="page" id="page1" class="page">

<script type="text/javascript">
    $(document).ready(function () {
    InitRightBar();
    InitLeftBar();
    ReloadText();
    InitBackButton();
    InitForwardButton();
    });
    </script>

<div data-role="header" data-id="fixedheader" data-position="fixed" >   
    <h1>Fixed header</h1>
</div><!-- /header -->

<div data-role="content">
    <div id="contentview">
        <a href="#page2" data-transition="flip">Linky</a>
    </div>
    <div id="rightbar">
        <img src="images/Testbar.png">
    </div>
</div><!-- /content -->

<div data-role="footer" data-id="fixedfooter" data-position="fixed">
    <a id = "BackButton" href="#">Back</a>
    <a id="ForwardButton" href="#">Forward</a>
</div><!-- /footer -->
</div><!-- /page1 -->

<div data-role="page" id="page2" class="page">

<script type="text/javascript">
    $(document).ready(function () {
            InitRightBar();
            InitLeftBar();
            ReloadText();
            InitBackButton();
            InitForwardButton();
            });
    </script>        

    <div data-role="header" data-id="fixedheader" data-position="fixed" >   
        <h1>Fixed header</h1>
    </div><!-- /header -->

    <div data-role="content">
    <div id="leftbar">
        <img src="images/Testbar.png">
    </div>
    <div id="mainview">
        <blockquote id="blocktext">
            <p>Hello world</p>
            <p><a href="#page1" data-transition="flip">Linky</a></p>
        </blockquote>
    </div>
    </div><!-- /content -->

    <div data-role="footer" data-id="fixedfooter" data-position="fixed">
        <a id = "BackButton" href="#">Back</a>
        <a id = "ForwardButton" href="#">Forward</a>
    </div><!-- /footer -->
</div><!-- /page2 -->
</body>

如果有帮助，我可以提供各个功能，但据我所知，使用警报，问题可能出在此处 - 第二页的按钮根本没有变得活跃/可点击......

无论如何，提前谢谢！贾尔斯

*更新回应克里斯的评论：

感谢您的建议 - 我已尝试禁用第 2 页的脚本，但没有任何区别，但我不确定这是因为它们实际上是多余的，还是因为我遇到的整体问题（我认为我需要初始化按钮，因为该页面只有在用户滑动或链接到它时才会加载到 DOM？）

我真的看不出任何东西来澄清第二页上固定页眉/页脚的元素是否实际上是从第一页保留的，或者只是在原地复制，所以我假设我必须单独编码它们他们是“新”元素，并试图相应地初始化它们......这是错的吗？

按键功能代码如下：

function InitBackButton (){
    $("#BackButton").click(function(event){
                           alert("triggered!")
                event.stopImmediatePropagation()
                if (counter >0)
                    {counter -=1;
                    $("#blocktext").html(pagecontent[counter][0]);
                }
    });
}         

function InitForwardButton(){
$("#ForwardButton").click(function(event){
                          event.stopImmediatePropagation()      
                          if (counter < 3)
                          {counter +=1;
                          $("#blocktext").html(pagecontent[counter][0]);
                          }
                          });
}
4

1 回答 1

1

知道了！

诀窍是使用“on”绑定事件处理程序，按钮名称位于“on”函数的“selector”字段中，而不是在开始时。这样，绑定适用于 DOM 中当前和将来出现的按钮名称......

这对大多数人来说可能是显而易见的，但对于像我这样的新手来说却不是，所以为了清楚起见，这里是代码：

这有效：

$("body").on("click", "#ForwardButton", function(event){
                               StepForward();
                               });
$("body").on("click", "#BackButton", function(event){
                          StepBack();
                            });

这不会（不会找到稍后创建的 ForwardButton 和 BackButton 的实例）：

$("#ForwardButton").on("click", function(event){
                               StepForward();
                               });
$("#BackButton").on("click", function(event){
                          StepBack();
                            });

在第一页的开头，克里斯关于冗余的观点被证明是正确的——事实上，我现在可以将“初始化”例程连同我的其余脚本一起移回我的 html 的头部......

于 2012-06-18T09:17:21.270 回答