javascript - jQuery append with Handebars -
i'm using handlebars render info got local server using ajax. html looks like:
<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>
i have simple form id, name , content inputs , sumbit button. looks like:
<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>
how can add new tab html document using jquery? i've tried write stub function like:
$("#buttonsumbit").click(function(){ var id = '10'; var name = '10'; $("<li data-tab-content='" + id + "'><a href=\"#\">" + name + "</a></li>").appendto("tabsid"); });
but nothing happening when i'm clicking sumbit button.
the problem id
should #id
, going use id selector of jquery should #id
, check change required done below :
$("<li data-tab-content='" + id + "'><a href=\"#\">" + content + "</a></li>").appendto("#tabsid")
Comments
Post a Comment