0

我有两个空<div>的像：

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

如果我使用 jQuery 插入其中一个（）的链接，并在使用此脚本打开 fancybox 时将#linkdiv内容插入到另一个（ ）：#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>

#fbLink当我在除 IE8 和更低版本之外的所有浏览器中单击动态添加的链接 ( ) 时，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的链接。

4

1 回答 1

0

似乎 IE8 和更低版本不知道type应该从动态添加的链接中打开什么内容。为什么？别问我，是IE。

作为一种解决方法，您可以使用 (HTML5)属性在动态添加的链接中设置type内容（在这种情况下），例如：inlinedata-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 测试过）

于 2013-03-26T16:37:57.457 回答