jQuery append with 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> 

У меня есть простая форма с ид, имя и содержание входов и кнопки нажмите кнопку. Он выглядит так:

<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> 

Как добавить новую вкладку в свой html-документ с помощью jQuery? Я попытался написать функцию заглушки, например:

$("#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, как вы собираетесь использовать ID селектор JQuery он должен быть #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>' 
    }) 
);