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”属性，但这不起作用。我也尝试重新加载list元素。这不起作用：（。

感谢任何帮助！

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

Answer 1

我意识到可以在列表中正确创建这些按钮，如下所示：

从按钮中删除 data-target =“page2”属性。
为所有按钮添加 onclick 属性。

将onclick（）指向与此类似的函数：

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

这对我有用，但我确信有更好的方法可以解决这个问题：）。

Answer 2

我发现了一点点改进。

在动态创建的按钮上设置data-target和data-target-args属性，为它们提供一些可区分的类名，并按如下方式实现：

// manually add the navigation event
$(page).find(".YOUR_CLASS_NAME").on("click", function (){
  var args = JSON.parse($(this).attr("data-target-args")) ;
   App.load($(this).attr("data-target"), args );
});

您可以随意调用该属性，当然，但我认为使用data-target-args可以清楚地说明这一点。

类名是必需的，因为如果将处理程序添加到已经具有data-target的静态创建按钮，则目标页面将加载两次。

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

2 个答案: