Q:

jQuery prettyPhoto : Click event doen't work

I have been using jQuery prettyPhoto plugin to show inline html content. This content has a link which is supposed to close prettyPhoto popup and call a custom script. The popup works fine but somehow click event of the link is not getting fired. Here is the code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
    <title>Development</title>
    <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css"/>
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function(){
            $("#closeme").click( function (e){
                e.preventDefault();
                alert("closing popup");
                $.prettyPhoto().close();
                alert("do some othe stuff");
            });

            $("a[rel^='prettyPhoto']").prettyPhoto();

        });
    </script>
</head>
<body>
<a href="#inline-1" rel="prettyPhoto" >popop</a>
    <div id="inline-1" style="display:none;">
        <p>This is inline content opened in prettyPhoto.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <a href="#" id="closeme">close</a>
    </div>
</body>
</html>

If I remove $("a[rel^='prettyPhoto']").prettyPhoto(); then click event on inline html link works fine.
Can anybody please help me to identify the problem and fix it?
Thanks,
Amit Patel

A:

Modify your code as follows:
$(function () {
    $("a[rel^='prettyPhoto']").prettyPhoto();
    $('#closeme').live('click', function() {
        $.prettyPhoto.close();
        return false;
    });
});

