使用 jQuery SimpleModal 插件的浮动窗口中的内容在 IE8 中打开两次后无法替换

Question

我正在使用 SimpleModal 插件在浮动窗口中显示动态内容。在此浮动窗口上包含了 Javascript 函数调用（在单击事件上），这会更改此浮动窗口上的某些内容。

这对于 FF 来说非常有效。但是IE有一个问题（我只用IE8测试过）： 仅当第一次在相应页面上打开此模式窗口时，使用 jQuery 在此 Javascript 函数中更改任何内容（或任何其他效果，如隐藏 DIV 等）才有效。在后续调用中，如果此浮动窗口在其间关闭，IE 将什么也不做！

看来 IE 不再识别某些 DOM 对象已更改并且应该呈现这些更改。当检查 DOM 对象的实际内容时，您会看到内容已更改，但只是没有渲染！ :-(

我已经尝试过一些技巧，例如根元素上的 addClass('fake') / removeClass('fake') ，但没有成功。

这里有一些测试代码。

用于打开模态窗口的 Javascript 函数：

showTestModal('DEBUG', '<div id="DivTestRoot"><div id="DivTest">OrigValue</div><a href="javascript:changeContent(\'\',\'\');"">Click here</a></div>', 100, true, 50, 50);

Javascript 函数更改内容（从浮动窗口内调用）：

function changeContent() {
    $('#DivTest').html('ChangedValue');
    $('#DivTestRoot').addClass('fake');
    $('#DivTestRoot').removeClass('fake');
    $('#DivTestRoot').show();
    alert($('#DivTest').parent()[0].innerHTML);

}

调用 jQuery SimpleModal 插件的相应代码：

function showTestModal(title, data, height, showClose, top, left) {
if (title == undefined)
    title = "";
if (data == undefined)
    data = "";
if (height != undefined)
    TestModal.height = height;
if (top == undefined)
    top = 135;
if (left == undefined)
    left = 20;
var closeHTML = "";
if (showClose == undefined || showClose == true)
    closeHTML = "<a href='#' title='Close' class='modalCloseX'>x</a>";
var htmlModal = "<div id='DivTestModal' style='display:none'><div class='TestModal-top'></div><div class='TestModal-content'><h1 class='TestModal-title'>"
    + title + "</h1><div class='TestModal-loading' style='display:none'></div><div class='TestModal-errormessage' style='display:none'></div>"
    + "<div class='TestModal-message'>" + data + "</div></div><div class='TestModal-bottom'></div></div>";
$(htmlModal).modal({
    closeHTML: closeHTML,
    position: [top, left],
    overlayId: 'TestModal-overlay',
    containerId: 'TestModal-container',
    onOpen: TestModal.open,
    onShow: TestModal.show,
    onClose: TestModal.close
});

}

这或多或少是从 http://www.ericmmartin.com/projects/simplemodal：

var TestModal = {
message: null,
height: 0,
open: function(dialog) {
    //$(this).parent().appendTo("form");
    $(dialog).parent().appendTo("form");
    // add padding to the buttons in firefox/mozilla
    if ($.browser.mozilla) {
        $('#TestModal-container .TestModal-button').css({
            'padding-bottom': '2px'
        });
    }
    // input field font size
    if ($.browser.safari) {
        $('#TestModal-container .TestModal-input').css({
            'font-size': '.9em'
        });
    }
    var h = 280;
    if (TestModal.height > 0)
        h = TestModal.height;

    var title = $('#TestModal-container .TestModal-title').html();
    $('#TestModal-container .TestModal-title').html('Laden...');
    dialog.overlay.fadeIn(200, function() {
        dialog.container.fadeIn(200, function() {
            dialog.data.fadeIn(200, function() {
                $('#TestModal-container .TestModal-content').animate({
                    height: h
                }, function() {
                    $('#TestModal-container .TestModal-title').html(title);
                    $('#TestModal-container form').fadeIn(200, function() {
                        $('#TestModal-container #TestModal-name').focus();

                        // fix png's for IE 6
                        if ($.browser.msie && $.browser.version < 7) {
                            $('#TestModal-container .TestModal-button').each(function() {
                                if ($(this).css('backgroundImage').match(/^url[("']+(.*\.png)[)"']+$/i)) {
                                    var src = RegExp.$1;
                                    $(this).css({
                                        backgroundImage: 'none',
                                        filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + src + '", sizingMethod="crop")'
                                    });
                                }
                            });
                        }
                    });
                });
            });
        });
    });
},
show: function(dialog) {
    $('#TestModal-container .TestModal-close').click(function(e) {
        e.preventDefault();
        if ($('#TestModal-container .TestModal-errormessage:visible').length > 0) {
            var msg = $('#TestModal-container .TestModal-errormessage div');
            msg.fadeOut(200, function() {
                msg.empty();
                contact.showError();
                msg.fadeIn(200);
            });
        }
        else {
            $('#TestModal-container .TestModal-errormessage').animate({
                height: '30px'
            }, contact.showError);
        }
    });
},
close: function(dialog) {
    $('#TestModal-container .TestModal-errormessage').fadeOut();
    $('#TestModal-container .TestModal-title').html('Schliessen...');
    $('#TestModal-container form').fadeOut(200);
    $('#TestModal-container .TestModal-content').animate({
        height: 40
    }, function() {
        dialog.data.fadeOut(200, function() {
            dialog.container.fadeOut(200, function() {
                dialog.overlay.fadeOut(200, function() {
                    $.modal.close();
                });
            });
        });
    });
},
error: function(xhr) {
    alert(xhr.statusText);
},
showError: function() {
    $('#TestModal-container .TestModal-errormessage')
   .html($('<div class="TestModal-error">').append(contact.message))
   .fadeIn(200);
}
};

第二次打开浮动窗口时，会在警告框中看到innerHTML已被适配，但仍然是在第一次尝试中，它总是显示值“ChangedValue”（“ChangedValue”显示在 DIV 中），

您的任何提示！

谢谢 罗杰

Answer 1

抱歉我的措辞 - 昨天已经很晚了！ ;-)

对问题的简短、希望更清晰的描述：

从 SimpleModal 窗口内调用 Javascript 函数。在此函数中，在此模式窗口中找到的一些内容将被替换 - 例如 $('#DivTest').html('ChangedValue')。

在 IE8 中，如果关闭并再次打开 SimpleModal 窗口，则无法再更改此模式窗口中的任何内容或将元素设置为不可见等。您可以看到 DOM 对象的内容和属性已更改，例如通过使用警报功能，但这些更改不会呈现。

FF 不会出现此问题。

干杯，
罗杰

Answer 2

罗杰，

尝试将您的功能更改为：

function changeContent() {
    var container = $('#TestModal-container')[0];
    $('#DivTest', container).html('ChangedValue');
    //$('#DivTestRoot').addClass('fake'); // ? why add class then removeClass?
    //$('#DivTestRoot').removeClass('fake');
    $('#DivTestRoot', container).show();
    alert($('#DivTest', container).parent()[0].innerHTML);
}

我认为问题在于您绑定和访问内容的方式。如果这没有帮助，请告诉我。

-埃里克

Answer 3

我发现 IE8 在关闭模态窗口后似乎没有正确删除 DOM 对象。

您可以在调试 Javascript 时看到，打开另一个模式窗口后，对象的旧值仍然存在，但渲染的内容不同！在这种情况下，IE8“决定”不对这些对象执行任何操作。

SimpleModal jQuery 插件的 $.modal.close() 函数在关闭模态窗口时被调用。在 FF 中，所有 DOM 对象似乎都从内存中正确删除，但在 IE8 中则不然。

在这些发现之后，我决定实施一种不同的方法 - 模式窗口和标准 aspx 页面中的 iFrame。效果很好。

干杯，
罗杰