IBM工作灯 - 点击一个按钮导航到另一个HTML页面无法正常工作（多页应用程序）(IBM Work

2019-10-18 06:40发布

我试图按照本指南。我到一个问题，当我尝试当用户点击一个按钮更改HTML文件。

这是我的脚本：

<script>
        window.$ = window.jQuery = WLJQ;
        $("#btnPromo").click(function(){
            $("#pagePort").load("pages/MainPage.html", function(){
                alert("loaded!");
            });
        });
    </script>

这是我的核心HTML文件（工作灯自动生成）：

<body onload="WL.Client.init({})" id="content" style="display: none;">
<!--application UI goes here-->
<div data-role="page" id="pagePort">
    <div id="header" align="center">
        <img src="images/logo.png">
    </div>

    <div data-role="content">
        <div>
            <input type="image" name="btnPromo" src="images/btnHotPromo.png" width="75%"/>
        </div>
        <div>
            <input type="image" name="btnMall" src="images/btnMall.png" width="75%"/>
        </div>
        <div>
            <input type="image" name="btnOutlet" src="images/btnOutlet.png" width="75%"/>
        </div>
        <div>
            <input type="image" name="btnAbout" src="images/btnAbout.png" width="75%"/>
        </div>
    </div>
</div>

我的目标是改变#pagePort到MainPage.html每次用户点击时间#btnPromo 。

Answer 1:

答案是我忘了加上 $(function(){}); 在代码的开始，所以代码应该是：

$(function(){
        $("#btnPromo").click(function(){
            $("#pagePort").load("pages/MainPage.html", function(){
                alert("loaded!");
            });
        });
});

一切都会OK：d

文章来源: IBM Worklight - Clicking a button to navigate to another HTML page doesn't work (multiple page application)