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

试试这个脚本标签导致问题

<!DOCTYPE HTML>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
      $('.new_task').hide();
      $('#addNewTask').click(function(){
          $('.new_task').toggle();
        });
    });
    </script>
    </head>

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

    <div>
        <form class="new_task">
          <textarea name="title" placeholder="Enter Task" rows="10"></textarea>
          <input type="submit" value="Submit" class="button right">
        </form>
    </div>
    </body>
    </html>

Answer 2

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

通过阅读文档和使用 meteor 的约定，让自己轻松一些。向正文模板添加事件以处理 #addNewTask 单击事件。下面是如何让它在流星中工作。

在你的 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>

Jquery 切换模板表单

Jquery toggle template form

javascript

jquery

handlebars.js

meteor