Question

当按下Enter键或单击按钮“info”而不是触发方法footerInfo的预期行为时，Meteor模板正在重新加载页面。
知道为什么以及如何在点击/按下按钮或按下Enter键时触发方法？ THX

Template.content.events({
  'keypress input': function (evt, template) {
    if (evt.which === 13) {
      $( "form" ).submit();
    }
  },
  'submit form': function (event) {
    event.preventDefault();
    footerInfo();
  }
});

footerInfo = () => {
  //do stuff
};

<head>
  <title>myApp</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div id="main">
    <div id="login-div">{{> loginButtons align='right'}}</div>
    <div id="content">
      <form>
        <button type="submit" style="display:none"></button>
        {{#if currentUser}}
          {{#if isVerified}}
            {{> content}}
            {{> footer}}
          {{else}}
            <p>Check your email for your verification link!</p>
          {{/if}}
        {{/if}}
      </form>
    </div>
  </div>
</body>

<template name="content">
  <form>
    <input type="text" id="plateNum">
    {{> results}}
  </form>
</template>

<template name="results">
  <p id="result">{{{display.alert}}}</p>
</template>

<template name="footer">
  <footer>
    <button id="clear">CLEAR</button>
    <button id="info">INFO</button>
  </footer>
</template>

Answer 1

问题是因为代码中有两个form标记。您也不需要监听输入键事件，默认情况下，当您按Enter键时将触发提交事件。要解决此问题，请先删除内容模板中的form标记：

<template name="content">
  <input type="text" id="plateNum">
  {{> results}}
</template>

在keypress模板中移除submit和content个事件监听器，并在submit模板中添加body个事件监听器：

Template.body.events({
  'submit form': function (event) {
    event.preventDefault();
    footerInfo();
  }
});

javascript - 输入密钥重新加载页面

1 个答案: