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

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

通过阅读文档和使用流星的惯例，让自己轻松自如。将事件添加到正文模板以处理#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>

Answer 2

尝试此脚本标记导致问题

<!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>

Jquery切换模板表单

2 个答案: