语义 ui 形式

Question

出于某种原因，submit event 不适用于使用语义 ui 包的简单表单。

这是我的表格。

<form class="ui form register-form">
  <h4 class="ui dividing header">Create your AC Account</h4>
  <div class="">
    <div class="required field">
      <div class="ui icon input">
        <input type="text" placeholder="Username">
      </div>
    </div>
  </div>
  <div class="ui submit button register-button">Register</div>
 </form>

提交事件应该是什么样子的？

Template.example.events({
 'submit .register-button' : function() {
  console.log("submited")
  }
})

注意： 也以 class 名称 .register-form

的形式 truing

Answer 1

您的表单没有提交按钮。只有一个 div 格式为带有 submit 的 class 的按钮。您需要向 div 添加点击处理程序或切换到实际按钮。

Answer 2

更改模板标记以包含提交按钮：

<template name="example">
  <form class="ui form register-form">
    <h4 class="ui dividing header">Create your AC Account</h4>
    <div class="">
      <div class="required field">
        <div class="ui icon input">
          <input type="text" placeholder="Username">
        </div>
      </div>
    </div>
    <button class="ui submit button register-button" type="submit">Register</button>
  </form>
</template>

然后监听 form 元素上的 submit 事件：

Template.example.events({
  "submit form": function(event){
    event.preventDefault();
    //
    [...]
  }
});

语义 ui 形式

Semantic ui Form

javascript

forms

meteor

semantic-ui