我正在使用 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”按钮时没有任何反应。
最佳答案
问题是id应该是#id，因为你要使用jQuery的ID选择器它应该是#ID，检查下面需要完成的更改:
$("<li data-tab-content='" + id + "'><a href=\"#\">" + content +
"</a></li>").appendTo("#tabsId")
关于javascript - jQuery 附加 Handlebars，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31405123/