javascript - jquery href 与 handlebars 链接冲突

Question

我有一个 href，当我将鼠标悬停在它上面时会显示正确的链接。使用 Handlebars 。

{{#each tabs}}
<li><a href="/tabs/{{this.TabID}}" data-toggle="tab">{{this.TabName}}</a></li>
{{/each}}

当我点击它时，我得到一个
Uncaught Error: Syntax error, unrecognized expression: /tabs/1

如果我从页面中删除了 jQuery，它工作正常，但我需要为页面的其余部分使用 jQuery。

有什么想法吗？

编辑:

<div id="content">      
<div id="content-container">
     <div class="tabbable">
        <ul class="nav nav-tabs">
            {{#each tabs}}
            <li><a href="/{{this.TabID}}" data-toggle="tab">{{this.TabName}}</a></li>
            {{/each}}
        </ul>
        <div class="tab-content">
            {{#each tabs}}
            <div id="{{this.TabID}}" class="tab-pane">
                <h4>{{this.TabName}}</h4>
            </div>
            {{/each}}
        </div><!-- /.tab-content -->
        <div>
            {{#each servers}}
                <h4>{{this.ServerName}}</h4>
            {{/each}}
        </div>
    </div><!-- /.tabbable -->
</div> <!-- content-container -->

Answer 1

基本上您在 href 属性中使用“/”。它应该是内容选项卡的 id，Jquery 选择器不能以“/”开头。

 <ul class="nav nav-tabs" role="tablist">
       {{!-- should use prefix with id like "tab"--}}
       {{#each this}}
    <li role="presentation"><a href="#tab{{this.TabID}}"  data-toggle="tab">{{this.TabName}}</a></li>
        {{/each}}
  </ul>
  <div class="tab-content">
       {{#each this}}
    <div role="tabpanel" class="tab-pane" id="tab{{this.TabID}}">{{this.TabName}}</div>
      {{/each}}
  </div>

jsfiddle