javascript - jQuery 附加 Handlebars

Question

我正在使用 Handlebars 来渲染使用ajax从本地服务器获得的信息。我的 HTML 看起来像:

    <ul class="nav nav-tabs" id="tabsId">
        <script id="tabs-template" type="text/x-handlebars-template">
            {{#each Tabs}}
                <li data-tab-content={{Id}}><a href="#">{{Name}}</a></li>
            {{/each}}
        </script>
    </ul>
    <div id="tabsContentId">
    <script id="tabs-content-template" type="text/x-handlebars-template">
        {{#each Tabs}}
            <div class="tab-content" data-tab-content="{{Id}}">{{Content}}</div>
        {{/each}}
    </script>
    </div>

我还有一个简单的表单，其中包含 id、名称和内容输入以及提交按钮。它看起来像:

<input type="text" class="form-control" name="inputIndex" id="inputIndex" placeholder="Index">
<input type="text" class="form-control" name="inputTitle" id="inputTitle" placeholder="Title">
<textarea class="form-control" rows="5" name="textareaContent" id="textareaContent" placeholder="Content"></textarea>
<button type="submit" class="btn btn-success" id="buttonSumbit">Add</button>

如何使用 jQuery 将新选项卡添加到我的 html 文档中？我尝试编写一个 stub 函数，例如:

$("#buttonSumbit").click(function(){
    var id = '10';
    var name = '10';
    $("<li data-tab-content='" + id + "'><a href=\"#\">" + name + "</a></li>").appendTo("tabsId");
});

但是当我单击“sumbit”按钮时没有任何反应。

Answer 1

问题是id应该是#id，因为你要使用jQuery的ID选择器它应该是#ID，检查下面需要完成的更改:

 $("<li data-tab-content='" + id + "'><a href=\"#\">" + content + 
               "</a></li>").appendTo("#tabsId")