Question

即使在函数中，我也试图从点击加载fancybox。它将在javascript函数之外工作，但不能在函数内工作。

实施例：这适用于页面加载并立即打开一个fancybox：

$.fancybox.open({
    width: 400,
    height: 400,
    autoSize: false,
    href: '/manager/users/edit/1',
    type: 'iframe' 
});

如果我收听点击事件，那么它就不起作用了：

$(document).ready(function ()
{
    $('.edit_user').click( function() { 
        $.fancybox.open({
            width: 400,
            height: 400,
            autoSize: false,
            href: '/manager/users/edit/1',
            type: 'iframe' 
            });
    });
});

Onclick失败并返回：

未捕获的TypeError：无法读取属性＆＃39;打开＆＃39;未定义的。

非常感谢任何见解

Answer 1

怎么样？

    $(document).on('click', '.edit_user', function() { 
        $.fancybox.open({
            width: 400,
            height: 400,
            autoSize: false,
            href: '/manager/users/edit/1',
            type: 'iframe' 
            });
    });

或取决于您的jquery版本

    $('.edit_user').live('click', function() { 
        $.fancybox.open({
            width: 400,
            height: 400,
            autoSize: false,
            href: '/manager/users/edit/1',
            type: 'iframe' 
            });
    });

Answer 2

看起来像jquery库版本的区别，在你引用我试图在本地实现它之后。它在点击事件上对我有用。这是我试过的代码。

$(document).ready(function() {
        $("#clickme").click(function() {
                    $.fancybox.open({
                    width: 400,
                    height: 400,
                    autoSize: false,
                    href: 'index.html',
                    type: 'iframe' 
                });
            });
        });

完成我尝试的代码。

<!DOCTYPE html>
<html>
<head>
    <title>fancyBox Tryout</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="../lib/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../source/jquery.fancybox.pack.js?v=2.1.5"></script>
    <link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" />
    <style type="text/css">
        .fancybox-custom .fancybox-skin {
            box-shadow: 0 0 50px #222;
        }

        body {
            max-width: 700px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <h1>fancyBox <a href="javascript:void(0);" id="clickme">click</a></h1>

    <script type="text/javascript">
        $(document).ready(function() {
        $("#clickme").click(function() {
                    $.fancybox.open({
                    width: 400,
                    height: 400,
                    autoSize: false,
                    href: 'index.php',
                    type: 'iframe' 
                });
            });
        });
    </script>
</body>
</html>

无法从函数加载fancybox，但它在函数外部工作

2 个答案: