我意识到这段代码有很多问题阻碍了我的目标。 这是我的目标。 我想要一个可以添加嵌套元素的动态表单，最好没有层数限制，但至少有9层左右。 我希望用户在启动时看到一个按钮，并且能够添加项目，然后添加每个项目下面的各种项目，然后添加另一组相同类型的项目。 我希望附加的按钮能够附加下一个深度级别。 我想根据添加的不同项目的需要添加表单字段。 所以，简单地说：
如果您还有其他问题，请告诉我。 我似乎无法格式化它以获得嵌套和可更改的部分。 感谢您的帮助！
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$("ol").append(" <b>New Item</b>.");
});
$("#btn2").on("click", function(){
$("ol").append("<li>New Item Title</li><input type='text'><br /><button id='btn1'>Add Nested Item</button><br /><br />");
});
});
</script>
<script type="text/javascript">
var counter = 0;
$("button").click(function() {
$("h2").append("<p class='test'>click me " + (++counter) + "</p>")
});
// With on():
$("h2").on("click", "p.test", function(){
alert($(this).text());
});
</script>
<button id="btn2">Add Item</button>
<form>
<ol>
</ol>
</form>
</body>
</html>
嵌套按钮并不是最好的模式；但是，对于那些决定这样做的人，您可能需要使用 event.stopPropagation()。我遇到了这样的情况：单击子按钮也会触发父按钮的事件处理程序。这不是预期的行为，但却是预期的行为。
解决方案是使用 event.stopPropagation() 来停止父级的 onClick 事件，以免触发子级的 onClick 函数，反之亦然。