Question

我遇到了this代码的一些问题。我正在尝试动态创建图像作为可以单击的无序列表项并重复该过程。但是，当我到达第二级时，我无法单击图像以使其生成下面的其他列表项。谁能告诉我这里我做错了什么？我能够点击前三个图像中的任何一个（都具有相同的类）并且它可以工作;我不确定为什么第二层不起作用。

$(".pic").on('click',function() {
var parent = $(this).parent().append("<ul><li class='child'><img src='http://www.clipartbest.com/cliparts/9Tp/MAz/9TpMAzbTE.png'/></li></ul>");
});

$(".child").on('click',function() {
alert($(this).parent().attr('class'));
var parent = $(this).parent().append("<ul><li class='child'><img src='http://www.clipartbest.com/cliparts/9Tp/MAz/9TpMAzbTE.png'/></li></ul>");
});

Answer 1

每当您动态创建元素时，您必须首先通过文档引用它，或者通过页面加载时存在的父元素引用它。这是因为在动态元素创建时已经加载了DOM，因此点击功能不会绑定到那些。例如，绑定到文档总是可以解决这个问题。

尝试将侦听器更改为：

$(document).on('click', '.pic', function() {
var parent = $(this).parent().append("<ul><li class='child'><img src='http://www.clipartbest.com/cliparts/9Tp/MAz/9TpMAzbTE.png'/></li></ul>");
});

$(document).on('click', '.child', function() {
alert($(this).parent().attr('class'));
var parent = $(this).parent().append("<ul><li class='child'><img src='http://www.clipartbest.com/cliparts/9Tp/MAz/9TpMAzbTE.png'/></li></ul>");
});

jQuery单击功能无法使用无序列表

1 个答案: