使用 Meteor 更改选项卡答案

【问题标题】：Changing tabs using Meteor使用 Meteor 更改选项卡
【发布时间】：2018-01-17 18:41:23
【问题描述】：

我遇到了麻烦，因为我尝试使用 Meteor 更改的选项卡无法正常工作。我只使用 HTML + CSS (Bootstrap) + jQuery 有相同的代码，它工作正常。但是当我将它放入我的 Meteor 应用程序时，选项卡没有正确更改，当我按下第一个选项卡上的“下一步”按钮时，它只会更改一次。

我没有看到任何解决方案。这是我没有使用 Meteor 的代码：

 $('.btnNext').click(function(){
  $('.nav-tabs > .active').next('li').find('a').trigger('click');
});

  $('.btnPrevious').click(function(){
  $('.nav-tabs > .active').prev('li').find('a').trigger('click');
});

<html>

<head>
  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>

<body>

<ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Menu 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Menu 2</a></li>
    <li><a href="#tab3" data-toggle="tab">Menu 3</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="tab1">
        <a class="btn btn-primary btnNext">Next</a>
    </div>
    <div class="tab-pane" id="tab2">
        <a class="btn btn-primary btnNext">Next</a>
        <a class="btn btn-primary btnPrevious">Previous</a>
    </div>
    <div class="tab-pane" id="tab3">
        <a class="btn btn-primary btnPrevious">Previous</a>
    </div>
</div>

</body>


</html>

在我的 Meteor 应用程序中，我将 Javascript 更改为：

Template.nameTemplate.events({

  "click .btnNext": function(){
    $(".nav-tabs > .active").next("li").find("a").trigger("click");
  }

});

有人可以帮我解决这个问题吗？谢谢！

【问题讨论】：

标签： javascript jquery twitter-bootstrap meteor

【解决方案1】：

我猜问题是 Bootstrap 在首次运行时会自动在带有data-toggle="tab" 的元素上添加事件处理程序。 Meteor 在引导程序运行后渲染选项卡，这意味着它们不会自动实例化。

这意味着您需要自己做。 Bootstrap docs 有一个这样做的例子：

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

对于您的示例，这意味着在您的活动中将 .click() 替换为 .tab('show')：

Template.nameTemplate.events({
  "click .btnNext": function(e){
    $(".nav-tabs > .active").next("li").find("a").tab("show");
  }
});

【讨论】：