Question

我目前有一个表单，其中包含一个包含以下代码的表单组。

<div class="form-group">
  <label>Role</label>
  <div class="radio">
    <label>
      <input type="radio" name="role-options" id="role-foreman" value="Foreman" checked="">Foreman
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="role-options" id="role-super" value="Superintendent">Superintendent
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="role-options" id="role-admin" value="Superintendent">Admin
    </label>
  </div>
</div>

这一切都按预期工作，但只要我向三个输入添加事件处理程序，我就会失去表单组的默认功能，即当按下一个单选按钮时，它将成为唯一选择的一个。

目前，我在模板的事件处理程序中有以下代码。

"click #role-foreman": (e) ->
    console.log e
    showAddProjects = true

"click #role-super": (e) ->
    console.log e
    showAddProjects = false

"click #role-admin": (e) ->
    console.log e
    showAddProjects = false

我正在寻找的是按钮的默认行为，但是当按下按钮时也会运行其他代码。

Answer 1

CoffeeScript具有隐式返回，因此您的事件处理程序将编译为JavaScript，如下所示：

"click #role-super": function(e) {
  var showAddProjects;
  console.log(e);
  return showAddProjects = false;
}

因此，您的事件处理程序正在返回false。当发生这种情况时，它stops the event from propagating and prevents the default behavior。要解决此问题，只需在函数末尾添加return，如下所示：

'click #role-super': (e) ->
  console.log e
  showAddProjects = false
  return

Meteor，将事件添加到单选按钮会禁用它们

1 个答案: