Question

我有一个可点击的div，它与bootstrap collapse插件连接，以显示/隐藏其可折叠内容。在这个div里面，有一个有一个淘汰赛提交处理程序的表单。当我单击表单中的提交按钮时，在敲除提交处理程序之前调用崩溃的单击处理程序。

Template.myParentTemplateName.created = function () {
  const template = this;
  template.autorun(function () {
     Meteor.setInterval(Session.set("newTime",new Date()), 6000);         
  });
}

Template.myParentTemplateName.helpers ({
  "questionaireUnlocked" : function () {
      const now = Session.get("newTime");
      .....
      if (now > startDate && now < endDate) {
          return true;
      }
   }
})

据我所知，崩溃的点击处理程序绑定到文档（如果您查看折叠数据-api），并且knockout submit-handler绑定到表单元素。如果单击提交按钮（或在输入中按Enter键），提交事件是否应该首先到达提交处理程序？截至表格是距离原点最近的父母？

<div data-toggle="collapse" data-target="#collapse1">
  ...
  <form data-bind="submit: submitForm">
    <input type="number" />
    <input type="submit" />
  </form>
</div>

<div class="collapse" id="collapse1">
  ...
</div>

我的问题：为什么在淘汰赛提交处理程序之前调用崩溃的点击处理程序？

请参阅jsfiddle以获得更好的示例：https://jsfiddle.net/knekk/oocxfgmq/

Answer 1

您已将toggle事件绑定到div元素。

尝试以上代码

＆＃13;

var viewModel = function() {
  this.formSubmit = function(){
  	alert('submit');
  };
  
  $('#collapse1').on('show.bs.collapse', function(e){
  	alert('show content');
  }).on('hide.bs.collapse', function(e){
  	alert('hide content');
  });
};

ko.applyBindings(new viewModel());

＆＃13;

<div class="container">
  <div class="list-group-item list-group-item-danger" >
    <div class="row form-inline">
      <div class="col-xs-6">
        <strong>Collapse</strong>
      </div>
      <div class="col-xs-6 text-right">
        <form data-bind="submit: formSubmit">
          <input type="number" />
          <input type="submit" role="button" data-toggle="collapse" data-target="#collapse1" />
        </form>
      </div>
    </div>
  </div>

  <!-- Collapse content -->
  <div class="collapse" id="collapse1">
    <p>
    Lorem ipsum dolor sit amet, cum etiam labitur diceret id, ex sale omnium neglegentur cum. Ad nec eirmod definiebas argumentum, eam te oratio disputando. In errem volumus cum, virtute platonem persequeris ei quo. Ex has reformidans consequuntur. Consetetur cotidieque et mea, in qui bonorum blandit.

Nemore essent his an. Te hinc wisi consulatu usu, fuisset conceptam ius cu. Eam id mazim altera argumentum. At ridens moderatius his, in posse tollit moderatius vim, in vel dico recteque. Cum illum dissentias in, ex stet aliquip salutatus eum.
    </p>
  </div>
</div>

＆＃13;

Answer 2

您的活动正在冒泡。 JQuery已将事件绑定到div，其中你的KO正在解雇另一个。所以jquery＆gt;敲击，按特定顺序点击事件。

http://knockoutjs.com/documentation/click-binding.html

你也可以＆＃34; hack＆＃34;它与css，并在崩溃元素顶部移动形式：

＆＃13;

var viewModel = function() {
  this.formSubmit = function() {
    alert('submit');
  };

  $('#collapse1').on('show.bs.collapse', function(e) {
    alert('show content');
  }).on('hide.bs.collapse', function(e) {
    alert('hide content');
  });
};

ko.applyBindings(new viewModel());

＆＃13;

.container {
  position: relative;
}
form {
  position: absolute;
  top: 7px;
  right: 80px;
  z-index: 1;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class="container">
  <form data-bind="submit: formSubmit">
    <input type="number" />
    <input type="submit" />
  </form>
  <div class="list-group-item list-group-item-danger" role="button" data-toggle="collapse" data-target="#collapse1">
    <div class="row form-inline">
      <div class="col-xs-6">
        <strong>Collapse</strong>
      </div>
    </div>
  </div>

  <!-- Collapse content -->
  <div class="collapse" id="collapse1">
    <p>
      Lorem ipsum dolor sit amet, cum etiam labitur diceret id, ex sale omnium neglegentur cum. Ad nec eirmod definiebas argumentum, eam te oratio disputando. In errem volumus cum, virtute platonem persequeris ei quo. Ex has reformidans consequuntur. Consetetur
      cotidieque et mea, in qui bonorum blandit. Nemore essent his an. Te hinc wisi consulatu usu, fuisset conceptam ius cu. Eam id mazim altera argumentum. At ridens moderatius his, in posse tollit moderatius vim, in vel dico recteque. Cum illum dissentias
      in, ex stet aliquip salutatus eum.
    </p>
  </div>
</div>

＆＃13;

在嵌套的knockout表单提交处理程序之前调用click处理程序

2 个答案: