語義用戶界面形式

Question

出於某種原因，使用語義ui包， submit event不適用於簡單形式。

這是我的表格。

<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")
  }
})

注意：也使用表單類名.register-form

Answer 1

更改模板標記以包括一個提交按鈕：

<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();
    //
    [...]
  }
});

Answer 2

您的表單沒有提交按鈕。 只有div格式化為類的按鈕submit 。 您需要向div添加點擊處理程序，或切換到實際按鈕。