Question

我正在使用基于多页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>

如果它有用，我可以提供各个功能，但据我可以告诉使用警报，问题可能在这里的某个地方 - 第二页的按钮根本没有变得活跃/可点击......

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

* 更新回应Chris的评论：

感谢您的建议 - 我已尝试禁用第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]);
                          }
                          });
}

Answer 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的头部。

切换页面后，Jquery持久页脚按钮不起作用

1 个答案: