旧版 Internet Explorer 和 FancyBox 中的链接答案

【问题标题】：Older Internet Explorer and link in FancyBox旧版 Internet Explorer 和 FancyBox 中的链接
【发布时间】：2013-03-22 18:14:13
【问题描述】：

有一个使用 FancyBox 的简单示例

<script type="text/javascript">
    (function($) {
        $(document).ready(function() {
            $('#fbLink1').fancybox({
                'afterLoad': function() {
                    $('#fancyboxdiv').html('<h1>Fancybox first</h1>');
                    $('#fancyboxdiv').append('<a id="fbLink2" href="#fancyboxdiv" title="fancybox 2">Fancybox second</a>');
                },
                'afterClose': function() {
                    $('#fancyboxdiv').html('');
                }
            });
            $('#fbLink2').fancybox({
                'afterLoad': function() {
                    $('#fancyboxdiv').html('<h1>Fancybox second</h1>');
                    $('#fancyboxdiv').append('<a id="fbLink1" href="#fancyboxdiv" title="fancybox 1">Fancybox first</a>');
                },
                'afterClose': function() {
                    $('#fancyboxdiv').html('');
                }
            });
        });
    })(jQuery);
</script>
<div id="fancyboxdiv" style="display: none;"></div>     
<a id="fbLink1" href="#fancyboxdiv" title="fancybox first">First</a><br />
<a id="fbLink2" href="#fancyboxdiv" title="fancybox first">Second</a><br />

在 Chrome 浏览器中它运行良好，但在 Internet Explorer 中它不起作用。如何让它在 IE8 及更低版本中运行？

【问题讨论】：

可能使用的是旧版本的 jQuery
什么不起作用？控制台有错误吗？
我使用jquery-1.9.0.min.js，consol中看不到任何错误。

标签： javascript jquery internet-explorer fancybox fancybox-2

【解决方案1】：

首先检查fancybox documentation -->FAQ 标签 --> No. 6。

这是典型的情况，在我看来，IE 是一个更好的浏览器，因为它不允许您与具有重复 ID 的元素进行交互（ID 应该是唯一的，并且两个元素不能具有相同的 @ 987654323@在同一个文档中）

话虽如此，您正在做的是添加第二个元素，其中包含先前定义的 ID：

$('#fancyboxdiv').append('<a id="fbLink2" href="#fancyboxdiv" title="fancybox 2">Fancybox second</a>');

虽然其他浏览器允许您使用此类重复的 ID，但 IE 不会。

由于您已经使用它们的 ID 作为选择器为每个元素初始化了 fancybox $('#fbLink1').fancybox(); 和 $('#fbLink2').fancybox(); 然后你只需要触发每个选择器（使用onclick）而不是添加一个重复的 ID，如：

(function ($) {
    $(document).ready(function () {
        $('#fbLink1').fancybox({
            beforeShow: function () {
                $('#fancyboxdiv').html('<h1>Fancybox first</h1>');
                $('#fancyboxdiv').append('<a onclick="javascript:$(\'#fbLink2\').click();" href="javascript:;" title="fancybox 2">Fancybox second</a>');
            },
            afterClose: function () {
                // $('#fancyboxdiv').html('');
                $('#fancyboxdiv').empty();
            }
        });
        $('#fbLink2').fancybox({
            beforeShow: function () {
                $('#fancyboxdiv').html('<h1>Fancybox second</h1>');
                $('#fancyboxdiv').append('<a onclick="javascript:$(\'#fbLink1\').click();" href="javascript:;" title="fancybox 1">Fancybox first</a>');
            },
            afterClose: function () {
                // $('#fancyboxdiv').html('');
                $('#fancyboxdiv').empty();
            }
        });
    }); // ready
})(jQuery);

这应该适用于任何浏览器（用 IE7 测试）

【讨论】：

我的声望少于 15 个。
@user2157361 ：您不需要声誉来接受答案。