Javascript jQuery:Can'；t在追加后选择新元素

我使用jQuery创建了一个表示UI树的结构。我添加了在任何级别添加新元素的功能（“添加新”按钮在您选择要添加的级别时被激活）

但是在我的示例中，我不能向新创建的元素添加新元素。我尝试了不同的方法，但不起作用

我很乐意得到关于如何解决此问题的提示

$（函数（）{
常量新元素=$（“#新元素”）；
让目标按钮；
函数indexOfChildren（）{
$（'li'）.prepend（函数（）{
让countOfChildren=$（this.children（）.find（“>li”）.length；
让targetSpan=$（此）。find（'button>：first child'）；
targetSpan.text（儿童计数）；
});
};
indexOfChildren（）；
$（'li>按钮'）。打开（'focus'，函数（e）{
targetButton=$（此项）；
newElement.prop（“禁用”，false）；
});
$（'[name=“new button”]'）。在（'click'，函数（e）{
targetButton=$（此项）；
newElement.prop（“禁用”，false）；
});
newElement.click（函数（）{
让name=prompt（“请输入新元素名称”）；
让parentTargetButton=targetButton.closest（'li'）；
让indexTargetSpan=parseInt（targetButton.find（':first child'）.text（））；
if（name！=null）{
如果（indexTargetSpan==0）{
parentTargetButton.append（“
”+name+”
）；
}否则{
parentTargetButton.children（'ul'）。追加（'
'+name+'
'）；
}
}
indexOfChildren（）；
targetButton.focus（）；
});
});
正文{
背景色：#f5f6f8；
}
.主要内容{
背景：#fff；
盒影：0 5px20px 0#c8d2dd6e；
-网络工具包盒阴影：0 5px 20px 0#c8d2dd6e；
边界半径：5px；
}
.高层{
边框底部：1px实心#dadee7；
}
保险商实验室{
列表样式类型：无；
}
ul>li>ul{
左边框：1px实心#eee；
左边距：60像素；
}
ul>li>ul>li:之前{
左边框：1px实心；
}
#新元素{
背景色：#33b5ff；
颜色：#fff；
边界半径：40px；
}
.main content.btn{
框大小：内容框；
宽度：140px；
填充：14px；
文本对齐：左对齐；
背景色：#f5f6f8；
边界半径：7px；
}
跨度{
浮动：对；
颜色：#fff；
线高：1.4；
边界半径：0.8em；
-moz边界半径：0.8em；
-webkit边界半径：01em；
文本对齐：居中；
字号：0.9em；
宽度：1.4em；
背景色：#33b5ff；
}
.btn：焦点，
.btn:悬停，
#新元素{
-网络工具包盒阴影：0 5px 25px 0#9dabb69；
*/盒影：0 5px25px 0#9dabb69；
}
.主要内容.btn:焦点{
颜色：#fff；
背景色：#0095ff！重要；
}

新项目
+添加新元素


项目


网页设计


CSS


HTML


HTML


XHTML








您可以将
.on
事件绑定到已存在的父元素

$('li').on('focus', 'button', function(e) {
  targetButton = $(this);
  newElement.prop("disabled", false);
});


$（函数（）{
常量新元素=$（“#新元素”）；
让目标按钮；
函数indexOfChildren（）{
$（'li'）.prepend（函数（）{
让countOfChildren=$（this.children（）.find（“>li”）.length；
让targetSpan=$（this.find（'button>：first child'）；
targetSpan.text（儿童计数）；
});
};
indexOfChildren（）；
$（'li'）。关于（'focus'，'button'，函数（e）{
targetButton=$（此项）；
newElement.prop（“禁用”，false）；
});
$（'[name=“new button”]'）。在（'click'，函数（e）{
targetButton=$（此项）；
newElement.prop（“禁用”，false）；
});
newElement.click（函数（）{
让name=prompt（“请输入新元素名称”）；
让parentTargetButton=targetButton.closest（'li'）；
让indexTargetSpan=parseInt（targetButton.find（':first child'）.text（））；
if（name！=null）{
如果（indexTargetSpan==0）{
parentTargetButton.append（“
”+name+”
）；
}否则{
parentTargetButton.children（'ul'）。追加（'
'+name+'
'）；
}
}
indexOfChildren（）；
targetButton.focus（）；
});
});
正文{
背景色：#f5f6f8；
}
.主要内容{
背景：#fff；
盒影：0 5px20px 0#c8d2dd6e；
-网络工具包盒阴影：0 5px 20px 0#c8d2dd6e；
边界半径：5px；
}
.高层{
边框底部：1px实心#dadee7；
}
保险商实验室{
列表样式类型：无；
}
ul>li>ul{
左边框：1px实心#eee；
左边距：60像素；
}
ul>li>ul>li:之前{
左边框：1px实心；
}
#新元素{
背景色：#33b5ff；
颜色：#fff；
边界半径：40px；
}
.main content.btn{
框大小：内容框；
宽度：140px；
填充：14px；
文本对齐：左对齐；
背景色：#f5f6f8；
边界半径：7px；
}
跨度{
浮动：对；
颜色：#fff；
线高：1.4；
边界半径：0.8em；
-moz边界半径：0.8em；
-webkit边界半径：01em；
文本对齐：居中；
字号：0.9em；
宽度：1.4em；
背景色：#33b5ff；
}
.btn：焦点，
.btn:悬停，
#新元素{
-网络工具包盒阴影：0 5px 25px 0#9dabb69；
*/盒影：0 5px25px 0#9dabb69；
}
.主要内容.btn:焦点{
颜色：#fff；
背景色：#0095ff！重要；
}

新项目
+添加新元素


项目


网页设计


CSS


HTML


HTML


XHTML