0

我正在尝试制作自己的待办事项列表应用程序，但第一步甚至都行不通！这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <title>To-Do List</title>
        <script type='text/javascript' src='script.js'></script>

    <!--JAVASCRIPT-->
    <script>
     </script>

        <script src="jquery.js"></script>

        <!--JQUERY--> 
<script>

$(function() {
  $("#new").click(function() {
     $("html").append("<div><form> Category Name: <input type = \"text\">")
    });
});

</script>
</head>

   <!--USER INTERFACE-->
   <div>
   <p id = "new">New Category</p>
   </div>

   <div><p>Customize</p></div>

   <div><p>Save this list</p></div>


    </body>
</html>

当我在 Notepad++（Chrome 的最新版本）中打开应用程序时，单击“新类别”时没有任何反应。有什么帮助吗？

4

3 回答 3

3

您将 a 附加div到html元素：

$("html").append("<div><form> Category Name: <input type = \"text\">")

你应该把它放在body或下面，而不是html元素中。

$("body").append("<div><form> Category Name: <input type = \"text\">")

虽然某些浏览器可能会显示div无论如何，但您正在创建一个无效的结构。坚持一个有效的可能是最好的。

（请注意，通过 DOM 创建它与实际编写具有该内容的 HTML 文件完全不同。序列化的 HTML中有“可选”标签——例如来自文件或 URL 的标签——但这与通过DOM。）

在要附加的片段中包含结束标签也可能是一个好主意：

$("body").append("<div><form> Category Name: <input type = \"text\"></form></div>")
// Here ------------------------------------------------------------^^^^^^^^^^^^^

...虽然在我的实验中 jQuery 并不关心。

于 2013-08-14T20:59:54.400 回答
0

你必须<body>在你的</head>. 它正在工作。

于 2013-08-14T21:03:12.547 回答
0

您的项目文件夹中是否有本地 jquery？您的相对脚本路径表明如此。我在 jsfiddle（包括 jquery）中创建了你所拥有的，它按预期工作：http: //jsfiddle.net/3qjFg/

HTML

<div>
  <a href="#" id="new">New Category</a>
</div>

<div>
  <p>Customize</p>
</div>

<div>
  <p>Save this list</p>
</div>

jQuery

$(function() {
  $("#new").on("click", function(event){
    event.preventDefault();
    $("body").append("<div><form> Category Name: <input type = \"text\">");
  });
});
于 2013-08-14T21:04:06.347 回答