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

Opening fancybox inline content from a dynamically added link in Internet Explorer

本文关键字：fanybox 链接 Explorer Internet 添加 动态      更新时间：2023-09-26

我有两个空的<div>:

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

如果我插入一个链接到其中一个(#linkdiv)与jQuery和插入内容到另一个(#fancyboxdiv)当fancybox打开这个脚本:

<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)时，fancybox会触发，但IE8和更低版本除外。

如果硬编码<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和更低的版本?我需要在以后的时间添加触发fanybox的链接。

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

作为一种解决方法，您可以使用(HTML5) data-fancybox-type属性在动态添加的链接中设置内容的type(在本场景中为inline)，如: 
<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上测试过)

相关文章：