2017-01-14 43 views
1

當按下Enter鍵或單擊按鈕「info」而不是預期行爲正在觸發方法footerInfo時,Meteor模板正在重新加載頁面。
任何想法爲什麼以及如何在點擊/按下按鈕或按下Enter鍵時觸發該方法? THXjavascript - 輸入密鑰重新加載頁面

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> 

回答

0

的問題是,因爲你必須在你的代碼的兩個form標籤。您也不需要監聽輸入鍵事件,默認情況下,按Enter鍵時提交事件將被觸發。爲了解決這個問題首先我們刪除form標籤在你的內容模板:

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

content模板刪除keypresssubmit事件偵聽器,並在body模板添加submit事件偵聽器:

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