jQuery附加把手

I'm using handlebars to render info I got from my local server using ajax. My 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 also have a simple form with id, name and content inputs and sumbit button. It 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 I add a new tab to my html document using jQuery? I've tried to write a 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 is that id should be #id, as you are going to use ID selector of jQuery it should be #ID, check change required to be done below :

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

You have a missing # in your selector.

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

A bit cleaner way to append (my preference though):

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