J'utilise des guidons pour rendre les informations que j'ai obtenues de mon serveur local en utilisant ajax. Mon HTML ressemble à:

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

J'ai également un formulaire simple avec des entrées d'identifiant, de nom et de contenu et un bouton d'envoi. On dirait:

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

Comment puis-je ajouter un nouvel onglet à mon document html en utilisant jQuery? J'ai essayé d'écrire une fonction stub comme:

$("#buttonSumbit").click(function(){
    var id = '10';
    var name = '10';
    $("<li data-tab-content='" + id + "'><a href=\"#\">" + name + "</a></li>").appendTo("tabsId");
});

Mais rien ne se passe lorsque je clique sur le bouton Soumettre.

0
DieZZzz 14 juil. 2015 à 14:18

2 réponses

Meilleure réponse

Le problème est que id devrait être #id, comme vous allez utiliser le sélecteur d'ID de jQuery, il devrait être #ID, vérifiez le changement requis ci-dessous:

 $("<li data-tab-content='" + id + "'><a href=\"#\">" + content + 
               "</a></li>").appendTo("#tabsId")
1
Patel 14 juil. 2015 à 11:42

Vous avez un # manquant dans votre sélecteur.

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

Une façon un peu plus propre d'ajouter (ma préférence cependant):

$("#tabsId").append(
    $("<li/>", {
        'data-tab-content': id,
        'html': '<a href="#">' + content + '</a>'
    })
);
0
lshettyl 14 juil. 2015 à 11:28