jQuery追加Handebars

Question

我使用把手来渲染我使用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，名称和内容输入以及sumbit按钮的简单表单。它看起来像：

<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文档添加新标签？我试图编写一个存根函数，如：

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

但是当我点击sumbit按钮时，没有任何事情发生。

Answer 1

问题是{% url 'add_post' %}应该是id，因为你要使用jQuery的ID选择器它应该是#id，检查下面要做的更改：

#ID

Answer 2

您的选择器中缺少#。

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

一种更清洁的追加方式（我的偏好）：

$("#tabsId").append(
    $("<li/>", {
        'data-tab-content': id,
        'html': '<a href="#">' + content + '</a>'
    })
);