動態添加導航鏈接到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應用程序

回答

相關問題