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

我正在使用app.js创建一个简单的网页。我想创建一个包含链接到其他页面的按钮的LIST;我可以在我的HTML这样做很简单如下：动态添加导航链接到app.js应用程序

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

这<li>负荷“第2页”根据需要。

我的问题是我想动态地添加这些按钮。下面的作品很好地帮助创建按钮，并添加它们，但它们不会导致应用程序导航到第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>

我尝试添加了数据点击级=“活动”属性，但没有奏效。我也尝试重新加载列表元素。没有工作:(

任何帮助表示赞赏

编辑：！列表中正确显示，新李物体看起来像按钮，但他们不会移动到正确PAGE2 EDIT2：App.js是这样的：code.kik.com/app/2/index.html

来源

2014-10-16 rand00

**你是什么意思的“app.js”？**无论如何，你的问题最有可能的功能 - 你放入HTML的东西 - 是因为它在窗口加载或DOM准备好了，那就是当你使用的任何库都执行绑定。一旦完成，如果它没有使用顶级容器的事件委托，以后没有添加任何功能。无论你运行什么来绑定最初加载的元素，都需要运行在新的元素上。 – JAAulde 2014-10-16 16:11:53

什么是'data-target'，谁在看它？例如，如果某个库在页面加载时运行并添加事件侦听器，则它不会了解您动态添加的元素。您可能需要重新调用它或其他东西。 – 2014-10-16 16:17:07

App.js是这样的：http://code.kik.com/app/2/index.html – rand00 2014-10-16 16:17:47

我意识到，这是可能的，在列表中正确地创建这些按钮如下：

除去数据目标= “page2”属性来自but吨。
添加一个onclick属性到所有按钮。

点的onclick（）到类似这样的一个功能：

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

这对我的作品，但我相信有更好的方法来解决这个问题:)。

来源

2014-10-22 14:20:07 rand00

我发现有轻微改善。

设置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的静态创建的按钮，目标页面将加载两次。

来源

2016-09-29 08:56:58 kpollock

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

回答

相关问题