2010-05-09 69 views
3

我现在所拥有的这样的代码:当添加一个li时,它是否成为ul的一部分“真实”?

<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(用类列表项)附加项目没有任何反应,它得到的类是正确的,标题和值也是如此。

这可能与上面的代码在文档准备功能中有关吗?

+0

你能否澄清你在做什么,并显示有问题的实际代码?你在追加什么东西? – 2010-05-09 13:40:39

回答

11

使用.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上的所有方式。

+0

感谢您的详细解释!和更好的编码:)! – Noor 2010-05-09 13:53:28

+0

@Noor - Welcome :)另一个提示是,除非你需要这些隐藏的元素来隐藏空间,你可以使用'display'而不是'visibility',只需调用'.show()'和'.hide )'快捷方式。 – 2010-05-09 13:55:49

7

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

您需要使用jQuery的live event functionality来创建适用于即时创建的元素的点击事件。

+0

谢谢!所以我理解它部分正确:)!非常好的解释,并链接! – Noor 2010-05-09 13:42:53

相关问题