0
我有以下的HTML頁：jQuery代碼，無法添加數據時選擇窗格
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="row">
<div class="navbar-header">
<a class="navbar-brand" href="#">RSS Feed Reader</a>
</div>
<div class="collapse navbar-collapse navbar-right">
<form class="navbar-form" role="search" id="rssLinkForm">
<div class="form-group">
<input type="url" class="form-control" placeholder="Enter RSS Link" id="feedURL" />
</div>
<button type="submit" class="btn btn-primary">Get Feed</button>
</form>
</div>
</div>
</div>
</nav>
</div>
<div class="container" id="feedContainer">
<div class="row">
<div class="col-md-3 tabbable tabs-left" id="feedMasterPanel">
<ul class="nav nav-tabs" id="tabControls">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#messages" data-toggle="tab">Messages</a></li>
</ul>
</div>
<div class="col-md-9 tab-content" id="feedDetailContainer">
<div class="tab-pane active" id="home"></div>
<div class="tab-pane" id="profile"></div>
<div class="tab-pane" id="messages"></div>
</div>
</div>
</body>
爲了這，我嘗試添加新標籤控制面板中使用jquery：
google.load("feeds", "1");
$(document).ready(function() {
function addTabControlForFeed(feedTitle) {
var feedControl = $(document.createElement("li"));
var feedControlLink = $(document.createElement("a"));
feedControlLink.attr("href", "#" + feedTitle);
feedControlLink.attr("data-toggle", "tab");
feedControlLink.append(feedTitle);
feedControl.append(feedControlLink);
$("#feedMasterPanel ul").append(feedControl);
}
function addTabPaneForFeed(feedTitle) {
var feedPane = $(document.createElement("div"));
feedPane.addClass("tab-pane");
feedPane.attr("id", feedTitle);
$("#feedDetailContainer").append(feedPane);
}
function addEntryToPage(entry, feedPaneId) {
console.log(entry + "\n" + feedPaneId);
var feedDiv = $(document.createElement("div"));
feedDiv.addClass("row right-divided");
var feedTitle = $(document.createElement("h2"));
feedTitle.append(entry.title);
var feedLink = $(document.createElement("a"));
feedLink.attr("href", entry.link);
feedLink.append(feedTitle);
feedDiv.append(feedLink);
var feedDate = $(document.createElement("small"));
feedDate.append(entry.publishedDate);
feedDiv.append(feedDate);
var feedContent = $(document.createElement("p"));
feedContent.append(entry.content);
feedDiv.append(feedContent);
var feedPaneIdSelector = "#" + feedPaneId;
var feedPaneDiv = $(feedPaneIdSelector);
console.log(feedPaneDiv);
$(feedPaneDiv).append(feedDiv);
}
function getFeedWithURL(feedUrl) {
var feed = new google.feeds.Feed(feedUrl);
feed.load(function(result) {
if (!result.error) {
//console.log(result.feed.title + "\n" + result);
addTabControlForFeed(result.feed.title);
addTabPaneForFeed(result.feed.title);
$(result.feed.entries).each(function(index) {
addEntryToPage(this, result.feed.title);
});
console.log("done");
}
});
}
$("#rssLinkForm").submit(function(event) {
event.preventDefault();
feedUrl = $("#feedURL").val();
if (feedUrl !== "") {
getFeedWithURL(feedUrl);
} else {
console.log("Null Input");
}
});
});
然而，它只會增加窗格和控制，無法更新新面板的內容。如果我嘗試將內容添加到現有窗格，它會成功。我嘗試記錄窗格容器對象，而不是返回DOM元素，它返回類似於：
[prevObject：o.fn.init [1]，context：document，selector：「＃xkcd.com」， jQuery的：「2.1.0」，構造函數：函數...]
你可以發表代碼和錯誤的小提琴嗎？ – faby
請在您創建新選項卡/窗格元素的位置提供代碼。請使用getFeedWithURL函數中的所有js。 – gulty
我已經添加了所有的js代碼。仍然在小提琴上工作。由於表單發佈事件，它提供了一個錯誤。 – Moriarty