Javascript JQuery：动态更新HTML，以便JQuery能够识别它

所以，首先，我是一个网络新手（html/js）

我想要达到的目标：

我有一个自定义的树，我希望能够动态（使用jquery）为该树创建子树：

Html:

项目

JS:

$（“.childAdder”）。单击（函数（）{//addchild，它与root相同
$（this.parent（）.childrenList）子项。追加(
“
项目
\
\
'
);
});

正如你所看到的，我知道如何添加一个孩子（或多或少，一个建议总是受欢迎的）。然而，问题是，此代码仅适用于html中“预定义”的项目-->每次我动态（通过JS）添加子项时，此代码不会对新创建的元素执行（尝试执行

警报（'Hello'）；

-什么都看不到）

---

问题： 我假设我需要以某种方式“正确地”将我的新孩子添加到HTML的DOM（？）中，这样JS就可以识别它了，对吗？（但这似乎只能通过HTML静态页面实现，不是吗？）

不管怎样，我该如何做：添加新的子元素，以便为HTML元素执行相同的JS代码，为JS创建的元素执行相同的JS代码

• 是否有解决方案，或者整个实现都是错误的

您需要使用才能使其正常工作。这是通过使用

on

JQuery方法进行事件连接并修改参数来完成的

另外（仅供参考），

元素只能包含作为子元素的

元素。您的项目符号/嵌套列表结构无效

最后，在HTML字符串中添加随机

\

字符，这些字符不是必需的，实际上在这些位置无效

下面是正确的实现，HTML已更正为有效

//JQuery事件委派需要使用“on”方法，然后
//将事件绑定到确保始终接收事件（文档）的对象
//由于事件冒泡，因此在此处工作良好）。然后指定目标元素
//实际事件将从中触发。
$（document）.on（“click”，“.childAdder”，function（）{
//添加与根相同的子级
$（this）.parent（）.childrenList（.childrenList”）.append（
项
）；
});


项目



您需要使用才能正常工作。这是通过使用
on
JQuery方法进行事件连接并修改参数来完成的

另外（仅供参考），
元素只能包含作为子元素的
元素。您的项目符号/嵌套列表结构无效

最后，在HTML字符串中添加随机
\
字符，这些字符不是必需的，实际上在这些位置无效

下面是正确的实现，HTML已更正为有效


//JQuery事件委派需要使用“on”方法，然后
//将事件绑定到确保始终接收事件（文档）的对象
//由于事件冒泡，因此在此处工作良好）。然后指定目标元素
//实际事件将从中触发。
$（document）.on（“click”，“.childAdder”，function（）{
//添加与根相同的子级
$（this）.parent（）.childrenList（.childrenList”）.append（
项
）；
});


项目



如果您指的是“\`符号，则需要启用将字符串放在单独的行上。现在看看你的解决方案，谢谢不，这不是我说的角色。我说的是两个反斜杠字符（你应该知道，反斜杠字符是ES6的一部分，并不能在所有浏览器中使用。编辑了注释（忘记了double\）反斜杠无助于将字符串放在单独的行上。反斜杠字符是JavaScript转义字符嵌入字符串的方式，在这种情况下，它们后面紧跟着另一个字符。例如，
“\”是或不是…\”
导致双引号围绕实际字符串，因为
\“
是
”
的转义码。我同意。顺便说一句，你的代码工作得很完美，谢谢！如果你是说“\`symbol，那么需要它才能将字符串放在单独的行上。现在看看你的解决方案，谢谢。不，这不是我要说的字符。我说的是两个反斜杠字符（您应该知道，反勾号字符是ES6的一部分，并不适用于所有浏览器。编辑了注释（忘记了double\）反斜杠无助于将字符串放在单独的行上。反斜杠字符是JavaScript转义字符嵌入字符串的方式，在这种情况下，它们后面紧跟着另一个字符。例如，
“\”是或不是…\”
导致双引号围绕实际字符串，因为
\”
是
“
的转义码。我同意。顺便说一句，你的代码工作得很完美，谢谢！
    <ul>
      <li>
        Item
        <input type="button" value="+" class="childAdder">
        <ul class="childrenList"></ul>
      </li>
    </ul>

$(".childAdder").click(function() { // add child which is the same as root
  $(this).parent().children(".childrenList").append(
    '<li>Item</li>\
     <input type="button" value="+" class="childAdder">\
     <ul class="childrenList"></ul>'
  );
});