当附加一个li时,它不会成为ul"for real"的一部分吗？

Question

我现在有这个代码:

<ul><li class="listitem">text<li></ul>

jQuery的:

$('.listitem').click(function() {  
  $("#elname").text($(this).text());  
  $('#slists').css('visibility','hidden')  
  $('#elname').css('visibility','visible')  
  $('#elname').css('display','inline-block')  
});

这应该隐藏div而它确实如此,但是当我将项目附加到ul(使用类listitem)时,附加项目没有任何反应,它获得的类是正确的,标题和值也是如此.

这可能与上面的代码在文档就绪函数中有关吗？

Answer 1

.live()改为使用,如下所示:

$('.listitem').live('click', function() {  
  $("#elname").text($(this).text())
              .css({ visibility:'visible', display: 'inline-block' });
  $('#slists').css('visibility','hidden')  
});

.live()听在document你点击冒泡......与新老元素泡本次活动以同样的方式水平,所以它不关心什么是后来添加的,在那里作为你的.click()处理程序绑定一个点击就存在的元素在当时选择器已运行.

或者,您可以提供您<ul>的ID或类,并使用.delegate()如下:

$('#myUL').delegate('.listitem', 'click', function() {  
  $("#elname").text($(this).text())
              .css({ visibility:'visible', display: 'inline-block' });
  $('#slists').css('visibility','hidden')  
});

这样可以减少冒泡,因此在事件方面只需要更整洁一点,它会在<ul>不是一直向上捕获它document.

Answer 2

在设置时,在DOM中的所有元素上设置一次Click事件.添加列表项不会重新生成这些单击项.

您需要使用jQuery的实时事件功能来创建适用于即时创建的元素的单击事件.