使用Facebox进行jQuery委派

时间:2010-09-26 11:36:00

标签: jquery

嗨,我不是在分享代码。问题是在这段代码中请看一下。 (问题:我想每次发布facebox时,甚至来自ajax facebox都没有正常工作。我想问一下如何在这个事件中使用jQuery委托事件?)

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="facebox/facebox.css" type="text/css" />    
</head>
<body>

<ul id="items">
    <li> <a href='#'> Clone Object </a> </li>
    <li> <a href='#test' rel='facebox'> Click to open facebox </a> </li>
</ul>

<div id="test" style="display:none;">this is my test div</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="facebox/facebox.js"></script>

<script type="text/javascript">

    jQuery('a[rel*=facebox]').facebox();

    $("#items li").delegate('a', 'click', function(){
        $(this).parent().append('<li><a href="#test" rel="facebox"> New Element ( problem: it should open facebox) </a></li>');
        return false;
    });

</script> 

</bdoy>
</html>

1 个答案:

答案 0 :(得分:2)

一些事情,首先改为使用.live(),通过切换它:

jQuery('a[rel*=facebox]').facebox();

为此:

jQuery('a[rel*=facebox]').live('click', function(e) {
  $.facebox({ div: this.hash });
  e.preventDefault();
});

.delegate()版本:

$('#items').delegate('a[rel*=facebox]', 'click', function(e) {
  $.facebox({ div: this.hash });
  e.preventDefault();
});

然后,您的.parent()来电将<li>追加到<li>,而您应该替换:

$(this).parent()

使用.cloest()所以它会升级到<ul>并将其作为孩子添加到,如下所示:

$(this).closest("ul")

You can test out the updated version with the above changes (without images) here