颜色框和内联 html 未在 IE8 中显示答案

【问题标题】：Colorbox and inline html not showing in IE8颜色框和内联 html 未在 IE8 中显示
【发布时间】：2012-12-10 20:27:37
【问题描述】：

我在 ColorBox 中调用内联 html，它在 IE8 中没有显示任何内容。这可以在 Jack Moores 自己的网站上复制。只需转到演示站点http://www.jacklmoore.com/colorbox/example1/，然后单击倒数第二个链接“Inline HTML”。然后点击底部链接更新内容……在 IE8 中该框不显示任何内容。

我遇到了同样的问题，但我正在动态创建 div 集合，如下所示。它用于复选框确认。有什么建议吗？

  $('input[name$=chkApproved]').click(function (e) {
            var th = $(this);
            if (th.is(':checked')) {
                var dialog = '<div">'
                + '<div id="dialog">'
                + '<p style="margin-top: 30px;">'
                + 'Are you sure you want to approve this program?</p>'
                + '<p style="font-size: small;">'
                + '<strong>Note:</strong> This cannot be undone!</p>'
                + '<p style="text-align: center;">'
                + '<a href="#" onclick="javascript:parent.$.colorbox.close();" class="btn btn-small btn-primary">Approve</a>'
                + '&nbsp;&nbsp;&nbsp;&nbsp;'
                + '<a href="#" onclick="' + $(this).attr('id') + '.checked=false;parent.$.colorbox.close(); return false;" class="btn btn-small">Cancel</a>'
                + '</p></div></div>';

                $.colorbox(
                {
                    onLoad: function() {
                        $("#cboxClose").remove();
                    },
                    overlayClose: false,
                    href: dialog,
                    open: true,
                    title: "Program Approval",
                    inline: true,
                    height: "210px",
                    onClosed: function () {
                        $("[id$=btnHiddenApprove]").click();
                    }
                });
                e.stopPropagation();
            } else {

                th.attr('checked', false);

            }
        });

【问题讨论】：

标签： internet-explorer-8 colorbox

【解决方案1】：

我页面上的问题是链接损坏。刚刚修好了，应该问题不大。这不是 IE8 特有的，我在 IE8 上没有遇到任何问题。

我看到您发布的唯一问题是您在开头的<div> 元素中有一个杂散的引号。我在 IE8 中检查了您的内容，这确实是问题所在：

这个：

var dialog = '<div">'

应该是这样的：

var dialog = '<div>'

杂散的引号使您的标记格式不正确，这取决于浏览器他们希望如何响应或从错误中恢复，从而导致非常不一致的结果。

【讨论】：

是的，这是其中的一部分。我不得不移动调用以取消选中复选框到一个单独的函数中。奇怪的是，IE 中的一个简单错误会停止所有渲染，但其他浏览器可以正常工作。感谢您的帮助。
"奇怪的是，IE 中的一个简单错误会停止所有渲染。" -- 我猜你是在开玩笑或者很久没有这样做了……

【解决方案2】：

这里是有兴趣的人的修改代码....此代码将在复选框上显示确认，如果选择取消，则取消选中它。 onClosed 事件触发隐藏按钮单击事件，该事件通过 gridview 并设置所有选中的复选框。

function UnCheckBox(cb) {
        //alert(cb);
        $('#' + cb + '').removeAttr('checked');
    }
    $(document).ready(function () {

        $('input[name$=chkApproved]').click(function (e) {
            var th = $(this);
            if (th.is(':checked')) {
                var dialog = '<div>'
                + '<div id="dialog">'
                + '<p style="margin-top: 30px;">'
                + 'Are you sure you want to approve this program?</p>'
                + '<p style="font-size: small;">'
                + '<strong>Note:</strong> This cannot be undone!</p>'
                + '<p style="text-align: center;">'
                + '<a href="#" onclick="javascript:parent.$.colorbox.close();" class="btn btn-small btn-primary">Approve</a>'
                + '&nbsp;&nbsp;&nbsp;&nbsp;'
                + '<a href="#" onclick="UnCheckBox(\'' + $(this).attr('id') + '\'); parent.$.colorbox.close(); return false;" class="btn btn-small">Cancel</a>'
                + '</p></div></div>';

                $.colorbox(
                {
                    onLoad: function() {
                        $("#cboxClose").remove();
                    },
                    href: dialog,
                    open: true,
                    title: "Program Approval",
                    inline: true,
                    height: "210px",
                    onClosed: function () {
                        $("[id$=btnHiddenApprove]").click();
                    }
                });
                e.stopPropagation();
            } else {

                th.attr('checked', false);

            }
        });

【讨论】：