javascript - 动态添加导航链接到 app.js 应用程序

Question

我正在使用 app.js 创建一个简单的网页.我想制作一个包含链接到其他页面的按钮的列表；我可以在我的 HTML 中非常简单地这样做，如下所示:

<ul>
    <li class="app-button green" data-target="page2">working!</li>
</ul>

这<li>根据需要加载“page2”。

我的问题是我想动态添加这些按钮。以下内容可以很好地帮助创建按钮并添加它们，但它们不会导致应用导航到第 2 页:

function createLiItem(data, list) {
    //create this: <li class="app-button" data-target="page2"></li>
    var entry = document.createElement('li');
    entry.setAttribute('class','app-button red');
    entry.setAttribute('data-target','page2');
    entry.appendChild(document.createTextNode(data));
    list.appendChild(entry);
}

我正在检查控制台和页面，它们正在正确创建。以下是我的调试器:

<div class="app-section">
<div class="app-content app-scrollable app-scrollable" style="height: 200px; overflow: scroll;">
    <ul id="rList" class="app-list">
        <li class="app-button green" data-target="page2" data-clickable-class="active" style="-webkit-tap-highlight-color: rgba(255, 255, 255, 0);">working!</li>
        <label>text</label>
        <li class="app-button red" data-target="page2">notWorking</li>
        <li class="app-button red" data-target="page2">notWorking</li>
        <li class="app-button red" data-target="page2">notWorking</li>
        <label>text</label>
        <li class="app-button red" data-target="page2">notWorking</li>
        <li class="app-button red" data-target="page2">notWorking</li>
    </ul>
</div>

我尝试添加 data-clickable-class="active" 属性，但这没有用。我还尝试重新加载列表元素。那没有用:(。

感谢任何帮助!

编辑:列表显示正确，新的 LI 对象看起来像按钮，但它们没有正确移动到 page2。Edit2:App.js 是这样的:code.kik.com/app/2/index.html

Answer 1

我意识到可以按如下方式在列表中正确创建这些按钮:

• 从按钮中删除 data-target="page2" 属性。
• 为所有按钮添加一个onclick 属性。

• 将 onclick() 指向与此类似的函数:

  function transferToPage2() {
      App.load('page2', {})
  }
  

这对我有用，但我相信有更好的方法可以解决这个问题:)。