Question

我一直在使用jQuery prettyPhoto插件来显示内联html内容。此内容有一个链接，应该关闭prettyPhoto弹出窗口并调用自定义脚本。弹出窗口工作正常，但链接的点击事件不会被触发。这是代码。

<!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>

如果我删除了$("a[rel^='prettyPhoto']").prettyPhoto();，那么内联html链接上的click事件就可以了。

有人可以帮我识别问题并解决吗？

谢谢，阿米特帕特尔

Answer 1

修改您的代码，如下所示：

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

jQuery prettyPhoto：点击事件不起作用

1 个答案: