我正在使用 app.js 创建一个简单的网页。我想制作一个包含链接到其他页面的按钮的列表;我可以在 HTML 中非常简单地执行此操作,如下所示:
<ul>
<li class="app-button green" data-target="page2">working!</li>
</ul>
这个<li>
根据需要加载“page2”。
我的问题是我想动态添加这些按钮。以下内容可以很好地帮助创建按钮并添加它们,但它们不会导致应用程序导航到 page2:
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);
}
我正在检查控制台和页面,它们正在正确创建。以下来 self 的调试器:
<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 对象看起来像按钮,但它们没有正确移动到第 2 页。 Edit2:App.js是这样的:code.kik.com/app/2/index.html
最佳答案
我意识到可以在列表中正确创建这些按钮,如下所示:
- 从按钮中删除data-target="page2"属性。
- 为所有按钮添加一个onclick属性。
将 onclick() 指向与此类似的函数:
function transferToPage2() { App.load('page2', {}) }
这对我有用,但我确信有更好的方法来解决这个问题:)。
关于javascript - 动态添加导航链接到app.js应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26408886/