javascript - Jquery 切换模板表单

Question

我的代码在这里不起作用，任何人都知道问题出在哪里。我不知道问题出在哪里，代码看起来是正确的。

<script type="javascript">
$(document).ready(function(){
  $('.new-task').hide();
  $('#addNewTask').click(function(){
      $('.new-task').toggle();
    });
});
</script>

<nav>
 <div>
  <logo>Logo</logo>
  <button id="addNewTask">add newTask</button>
 </div>
</nav>

{{>submitTask}}

<template name="submitTask">
  <div>
    <form class="new-task">
      <textarea name="title" placeholder="Enter Task" rows="10"></textarea>
      <input type="submit" value="Submit" class="button right">
    </form>
  </div>
</template>

Answer 1

首先，这里有一些资源可以让您走上正确的道路:

• > https://www.meteor.com/tutorials/blaze/creating-an-app
• > http://docs.meteor.com/#/full/

通过阅读文档和使用 meteor 的约定，让自己轻松一些。将事件添加到正文模板以处理 #addNewTask 单击事件。以下是如何在 meteor 中实现这一点。

在你的 javascript 中:

Template.body.events({
    "click #addNewTask": function(event, template) {
        $(".new-task").toggle();
    }
});

在您的 html 中:

<nav>
 <div>
  <logo>Logo</logo>
  <button id="addNewTask">add newTask</button>
 </div>
</nav>

{{>submitTask}}

<template name="submitTask">
  <div>
    <form class="new-task" style="display:none;">
      <textarea name="title" placeholder="Enter Task" rows="10"></textarea>
      <input type="submit" value="Submit" class="button right">
    </form>
  </div>
</template>