Question

我有两个空的<div>，如：

<div id="fancyboxdiv" style="display: none;"></div>
<div id="linkdiv"></div>

如果我使用jQuery插入其中一个（#linkdiv）的链接，并在使用此脚本打开fancybox时将内容插入另一个（#fancyboxdiv）：

<script type="text/javascript">
    (function($) {
        $(document).ready(function() {
            //loading the opening link to a div with jquery
            $('#linkdiv').html('<a id="fbLink" href="#fancyboxdiv" title="fbox">see fancybox</a>');
            //opening the fancybox
            $('#fbLink').fancybox({
                'afterLoad': function() {
                    $('#fancyboxdiv').html('<h1>Fancybox</h1>');
                },
                'afterClose': function() {
                    $('#fancyboxdiv').empty();
                }
            });
        });
    })(jQuery);
</script>

当我在IE8及更低版本的所有浏览器中点击动态添加的链接（#fbLink）时，fancybox会触发。

如果对<div id="linkdiv">内的链接进行硬编码，请执行以下操作：

<div id="linkdiv"><a id="fbLink" href="#fancyboxdiv" title="fbox">see fancybox</a></div>

并注释掉这行代码：

//$('#linkdiv').html('<a id="fbLink" href="#fancyboxdiv" title="fbox">see fancybox</a>');

然后fancybox在包括IE8在内的所有浏览器中都能正常工作 - 。

如何让我的脚本在IE8及更低版本中运行，我该怎么办？我需要在以后添加触发fancybox的链接。

Answer 1

似乎IE8及更低版本无法知道动态添加链接应打开的内容fancybox的type。为什么？不要问我，这是IE。

作为一种变通方法，您可以使用（HTML5）type属性设置动态添加链接内的inline内容（data-fancybox-type），如：

<a id="fbLink" data-fancybox-type="inline" href="#fancyboxdiv" title="fbox">see fancybox</a>

您的完整脚本现在看起来像：

<script type="text/javascript">
(function ($) {
    $(document).ready(function () {
        //loading the opening link to a div with jquery
        // added data-fancybox-type to the link
        $('#linkdiv').html('<a id="fbLink" data-fancybox-type="inline" href="#fancyboxdiv" title="fbox">see fancybox</a>');
        //opening the fancybox
        $('#fbLink').fancybox({
            'afterLoad': function () {
                $('#fancyboxdiv').html('<h1>Fancybox</h1>');
            },
                'afterClose': function () {
                $('#fancyboxdiv').empty();
            }
        });
    });
})(jQuery);
</script>

应该做的伎俩（用IE7测试）

从Internet Explorer中动态添加的链接打开fancybox内联内容

1 个答案: