Javascript 添加选项卡控件和窗格的jQuery代码在向其添加数据时无法选择窗格_Javascript_Jquery_Dom_Client Side

Javascript 添加选项卡控件和窗格的jQuery代码在向其添加数据时无法选择窗格

javascript jquery dom

Javascript 添加选项卡控件和窗格的jQuery代码在向其添加数据时无法选择窗格,javascript,jquery,dom,client-side,Javascript,Jquery,Dom,Client Side,我有以下html页面： <body> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="row"> <div class="navbar-header"> <a class="navb

我有以下html页面：

    <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>

但是，它只添加窗格和控件，无法更新新窗格的内容。如果我尝试将内容添加到现有窗格，则会成功。我尝试记录pane容器对象，它没有返回DOM元素，而是返回如下内容：

[prevObject:o.fn.init[1]，上下文：文档，选择器：“#xkcd.com”，jquery:“2.1.0”，构造函数：函数…]

用作选项卡窗格id的提要标题的字符串中有一个“.”。尝试选择具有这些id的元素会导致选择无效

使用不包含“.”的id解决了问题

另外，请参阅，以获取更清晰的特殊字符转义方法。

您可以发布一个代码和错误吗？请提供创建新选项卡/窗格元素的代码。getFeedWithURL函数中使用的所有js。我已经添加了所有js代码。还在做小提琴。它给出了一个由form post事件引起的错误。

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");
        }
    });
});