模态仅在双击后出现

Question

我已按以下方式实现了bootstrap模式

  Template.dashboardLayout.events({
  'click .showModal': function(event, template) {
    event.preventDefault();

    var name = template.$(event.target).data('modal-template');
    Session.set('activeModal', name);
    $('.modal').modal();
  },

  /* Hide modal on ESC
   */
  'keyup': function(event, template) {
    if (event.keyCode === 27) {
      $('.modal').modal('hide');
    }
  }
});

Template.modal.helpers({
  activeModal: function() {
    return Session.get('activeModal');
  }
});

模板：

<button id="showNewTabForm" data-modal-template="newTab"
    class="btn btn-default btn-primary showModal pull-left">
    <i class="fa fa-plus"></i> New Tab
</button>

然后在我的主要布局中

<template name="dashboardLayout">

  <div class="background-image"></div>
  <div class="wrapper">
    {{> header}}

    <div class="container">
      <div class="col-md-2">
        {{> sidebar}}
      </div>
      <div class="col-md-10">
        {{> content}}
        {{> footer}}
      </div>
    </div>
  </div>
  {{> modal}}
</template>

但是，每当我第一次点击.openModel按钮时，它都不显示，虽然事件会触发，但在第二次点击时，它会正确打开

知道为什么会这样吗？