Javascript 难以在每个新表单中添加新表单<；部门>；

在创建待办事项列表应用程序的过程中，我遇到了另一个问题。在“我的代码”中，每当用户单击“新建类别”时，一个新的

div

将显示其自定义名称和表单编号

但是，当创建另一个

div

时，它的“表单”将提供给前一个

div

。这是代码：

    <script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script type='text/javascript' src="script.js"></script>
<script>
$(function() {
  $("#new").click(function() {
    var canContinue = true;
    var newCategory = prompt("Enter the name you want for your category:");
     if(newCategory.length === 0){
      confirm("A new category can not be created - nothing was entered in the text area.");
      canContinue = false;
      }
    if(canContinue){
    var categorySections = prompt("Enter the number of sections needed for this category:");
    $("body").append("<div id = \"newDiv\"><p>" + newCategory + "</p></div>");
    }

     for(var i = 0; i < categorySections; i++){
      $("#newDiv").append("<form> Thing to do: <input type = \"text\"></form><br>");
     }
    });
});
</script>

 $(function(){
$("#newDiv").ready(function() { 
 for(var i = 0; i < categorySections; i++){
      $(this).append("<form> Thing to do: <input type = \"text\"></form><br>");
     }
});
});

---

那么，如何为每个单独的

div

创建表单呢？

您重复创建具有相同ID的div。（a）这是不合法的，（b）如果您仍然这样做，您的

$（#newDiv）

选择器将始终应用于第一个div

另外，您将在

if（canContinue）

检查之外附加到

#newDiv

尝试：

if（canContinue）{
var categorySections=prompt（“输入此类别所需的节数：”）；
var newDiv=$（“”）.appendTo（$（document.body））；
var header=$（“”）.text（newCategory）.appendTo（newDiv）；
对于（变量i=0；i”；
}
}

不能多次使用ID

newDiv

，HTML ID必须是唯一的。此外，您的流可以稍微清理一下，如下所示

$(function () {
    $("#new").click(function () {
        var newCategory = prompt("Enter the name you want for your category:");
        if (newCategory.length === 0) {
            confirm("A new category can not be created - nothing was entered in the text area.");
            return false;
        }
        var categorySections = prompt("Enter the number of sections needed for this category:");
        var $div = $("<div />", {
            html: "<p>" + newCategory + "</p>"
        });
        $("body").append($div);

        for (var i = 0; i < categorySections; i++) {
            $div.append("<form> Thing to do: <input type='text'/></form><br>");
        }
    });
});

$（函数（）{
$（“#新建”）。单击（函数（）{
var newCategory=prompt（“输入您想要的类别名称：”）；
如果（newCategory.length==0）{
确认（“无法创建新类别-文本区域中未输入任何内容”）；
返回false；
}
var categorySections=prompt（“输入此类别所需的节数：”）；
变量$div=$（“”{
html:“+newCategory+”
“
});
$（“正文”）。追加（$div）；
对于（变量i=0；i”；
}
});
});

Oboy！只有文档有一个就绪事件，并且您要附加的所有元素都具有相同的ID，并且…我认为已经解决了。这个想法是为了练习我所学的新语言，而不是创建一个开创性的新应用程序。不过，谢谢您的参考！

$(function () {
    $("#new").click(function () {
        var newCategory = prompt("Enter the name you want for your category:");
        if (newCategory.length === 0) {
            confirm("A new category can not be created - nothing was entered in the text area.");
            return false;
        }
        var categorySections = prompt("Enter the number of sections needed for this category:");
        var $div = $("<div />", {
            html: "<p>" + newCategory + "</p>"
        });
        $("body").append($div);

        for (var i = 0; i < categorySections; i++) {
            $div.append("<form> Thing to do: <input type='text'/></form><br>");
        }
    });
});