jQuery 追加车把

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

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

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

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

jQuery 追加车把

jQuery append with Handebars

html

javascript

ajax

jquery

handlebars.js