javascript - 动态创建的列表的这个选择器也引用了父级

Question

 <ul id="parent">

 </ul>

 <script>
   var li =$('<li onclick="clicked(this)"/>').appendTo($('#parent'));
   var span=$('<span/>').text('first').appendTo(li);  
   var ul1=$('<ul onclick="clicked(this)"/>').appendTo(li);
   var li1=$('<ul onclick="clicked(this)"/>').appendTo(ul1);
   var span1=$('<span/>').text('second').appendTo(li1);   

   function clicked(ref)
   {
      alert($(ref).children('span').text());
   } 
</script>

我的问题是，当我单击第二个时，警报框会弹出 2 次并同时显示第一个和第二个。但我只想要第二个。

我怎么能只参考li1。

Answer 1

你li1作为一个孩子添加到另一个 li。我不知道这是否是你想要的，但你不应该那样做。这也是您收到两个警报的原因。两个 onclick 处理程序都被触发。

Answer 2

你需要像这样做出改变

 var li1 =$('<li onclick="clicked(this)"/>').appendTo($('#parent'));

附加到父元素 <ul id="parent">

高温高压

Answer 3

您是否有示例页面或小提琴，以便我们可以看到您要执行的输出？我认为您应该将代码重写为如下内容：

$('<li>')
    .appendTo($('#parent'))
    .click(function(){
     clicked($(this));
    }).append(
        $('span').text('first')
     );

  function clicked(ref)
     {
         alert(ref.text());
     }

无论如何，您似乎将一个 LI 附加到另一个 li 中，您应该将它附加到父 ul