Javascript jQuery on（“单击”）未触发

我有一个系谱树，从一个用户开始（下面是JSFIDLE）

此用户有2个选项（一个正在工作，另一个暂时不工作），其中一个（+）打开一个弹出窗口：添加“夫妇”，添加“子”和添加“父”

添加子项将在父项下创建一个具有相同选项的新子项

对于儿童和夫妇，代码可以完美地工作，使用jQuery中的

.on（“click”）

方法，但是当选择“parent”选项时，这些选项不会触发

.on（“click”）

方法

这棵系谱树是从互联网上获得的。带有每个元素的

，并嵌套在
中的
，如果该元素有子元素。因此，如果我添加一个父级，我会将所有现有的
包装成一个新的
，并将这个包装成一个新的

代码：

希望您能帮助我理解为什么“单击”上的父级
。不像子级那样触发。
您的绑定不正确，请更改行

$("li").on("click", ".anadir", function() {

到

问题是您正在将单击处理程序绑定到
.tree
中的
li
元素，但是添加了一个父元素，您正在创建一个新的
li
元素，该元素没有委托的单击处理程序

当使用针对多个元素的事件委派时，需要将处理程序绑定到注册处理程序时dom中存在的公共祖先

$('.tree').on("click", ".anadir", function() {});


$（文档）.ready（函数（）{
$（'.tree'）。在（“单击“，”.anadir“，函数（）上）{
//骗局
$（“.popUp”）.fadeIn（）；
if（$（this.parent（）.parent（）.hasClass（“top”））{
$（“.parentShow”）.show（）；
}否则{
$（“.parentShow”）.hide（）；
}
var id=$（this.parent（）.parent（）.attr（“id”）；
$（“输入[name='id']”）val（id）；
log（$（“输入[name='id']））.val（）；
});
$（“.popUp”）。单击（函数（）{
$（this.fadeOut（）；
});
$（“#添加”）。在（“单击”，函数（）{
//获取最大id
var max=0；
$（“li”）。每个（函数（）{
if（$（this）.attr（“id”）>max）
max=$（this.attr（“id”）；
});
max++；
var type=$（“输入[name='add']：选中”）.val（）；
var name=$（“输入[type='text']”）val（）；
var id=$（“输入[name='id']”）val（）；
控制台日志（“id:+id”）；
如果（类型=“子项”）{
如果（$（“#”+id）.children（“ul”）.length>0）{
控制台日志（“a”）；
$（“#”+id）.children（“ul”）.append（“
”）；
}否则{
控制台日志（“b”）；
$（“#”+id）.append（“
”）；
}
}else if（类型==“耦合”）{
$（“#”+id+“a.couple”）.first（）.html（“+name+”）；
}else if（类型==“父级”）{
$（“#”+id）.removeClass（“top”）；
$（“#”+id.parent（）.wrap（“
”）；
$（“#”+id）.parent（）.wrap（“
”）；
$（“#”+max）.prepend（“”）；
}
$（“.popUp”）.fadeOut（）；
});
$（“.popUp*”）。单击（函数（e）{
e、 停止传播（）；
});
});
/*现在是CSS*/
* {
保证金：0；
填充：0；
}
树胶{
填充顶部：20px；
位置：相对位置；
}
李先生{
浮动：左；
文本对齐：居中；
列表样式类型：无；
位置：相对位置；
填充：20px 5px 0 5px；
}
/*我们将使用：：before和：：after来绘制连接器*/
李树：以前，
李树：之后{
内容：''；
位置：绝对位置；
排名：0；
右：50%；
边框顶部：1px实心#ccc；
宽度：50%；
高度：20px；
}
李树：之后{
右：自动；
左：50%；
左边框：1px实心#ccc；
}
/*我们需要移除元素中的左右连接器，而不需要
有兄弟姐妹吗*/
李树：独生子：：之后，
李树：独生子：：以前{
显示：无；
}
/*删除单个子对象顶部的空间*/
李树：独生子女{
填充顶部：0；
}
/*从第一个子系统上拆下左侧接头并拆下
上一个子节点的右连接器*/
李树：第一个孩子：：之前，
李树：最后一个孩子：：之后{
边界：0无；
}
/*将垂直连接件添加回最后一个节点*/
李树：最后一个孩子：：之前{
右边框：1px实心#ccc；
边界半径：0 5px 0 0；
-webkit边界半径：0 5px 0；
-moz边界半径：0 5px 0；
}
李树：第一个孩子：：之后{
边界半径：5px0；
-webkit边界半径：5px 0；
-moz边界半径：5px 0；
}
/*从父级添加向下连接器的时间到了*/
.树ul：：以前{
内容：''；
位置：绝对位置；
排名：0；
左：50%；
左边框：1px实心#ccc；
宽度：0；
高度：20px；
}
李树先生{
边框：1px实心#ccc；
填充物：5px10px；
文字装饰：无；
颜色：#666；
字体系列：arial、verdana、tahoma；
字体大小：11px；
显示：内联块；
边界半径：5px；
-webkit边界半径：5px；
-moz边界半径：5px；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
}
/*是时候使用一些悬停效果了*/
/*我们还将把悬停效果应用于元素的沿袭*/
李树答：悬停，
.树李a：悬停+ul李a{
背景：c8e4f8；
颜色：#000；
边框：1px实心#94a0b4；
}
/*悬停时的连接器样式*/
.树李a:悬停+ul李：：之后，
.树李a:悬停+ul李：：之前，
.树李a:悬停+ul：：之前，
.树李a:悬停+ul:：之前{
边框颜色：#94a0b4；
}
/*就这些。我希望你喜欢。
谢谢：）*/
.用户{
宽度：50px；
高度：50px；
背景：红色；
边框：1px实心#ccc；
边界半径：25px；
利润率：10px；
文本对齐：居中；
颜色：#fff；
线高：50px；
利润率：10px；
显示：块；
浮动：左；
}
.清楚{
明确：两者皆有；
}
.开始{
背景：#aaaaff；
}
.选择权{
利润率：0.10px；
}
.弹出窗口{
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,5）；
位置：绝对位置；
排名：0；
左：0；
显示：无；
}
Popupox先生{
宽度：600px；
高度：自动；
位置：相对位置；
顶部：100px；
保证金：自动；
}
.boxTitle{
背影
$('.tree').on("click", ".anadir", function() {});

$(document).ready(function() {
$(document).on("click", ".anadir", function() {
    $(".popUp").fadeIn();
    if($(this).parent().parent().hasClass("top")) {
        $(".parentShow").show();
    }
    else {
        $(".parentShow").hide();
    }
    var id = $(this).parent().parent().attr("id");
    $("input[name='id']").val(id);
    console.log($("input[name='id']").val());
});