jquery - IE8 仅在事件触发后显示 css 内容

标签 jquery css internet-explorer internet-explorer-8 gsp

我对 IE8 上 css 中的 :after 选择器有很大的疑问:

相关代码:

.required:after {
     content:" *";
     color: red;
}
<table id="loss-theft-case">
    <tbody>
        <tr>
            <td width="250px" colspan="2" class="required">
                <g:message code="losstheft.case.naam.label"/>
            </td>
            <td width="175px" colspan="2">
                <g:textField 
                    class="bigInput border_box naam_disableable x-item-disabled" 
                    name="surname" id="surnameCreateCase" value="${customer.surname}" 
                    readonly="readonly"/>    
            </td>
        </tr>
<!-- ...  -->
<div id="loss-theft-case-dialog" style="display:none">
    <g:include view="lossTheft/createLossTheftCase.gsp"/>
</div>
var lossTheftDialog;

function createLossTheftCaseDialog() {

    // Define dialog to be shown.
    lossTheftDialog = $("#loss-theft-case-dialog").dialog({
        autoOpen: false,
        dialogClass: "no-close",
        minWidth: 500,
        minHeight: 375,
        modal: true,
        resizable: false,
        open: focusTabTimeout,
        title: "Aanmaken verlies & diefstal case",
        buttons: {
            "Cancel": {
                id: "create-case-dialog-cancel-btn",
                text: "Annuleren",
                click: function () {
                    clearMessages();
                    lossTheftDialog.dialog("close");
                    log(SUBMIT_CANCEL_LOSSTHEFT_CASE);
                }
            },
            "OK": {
                id: "create-case-dialog-ok-btn",
                text: "Aanmaken",
                click: function () {
                    createCase();
                    log(SUBMIT_LOSSTHEFT_CASE);
                }
            }
        }
    }).css("font-size", "13px");

(此代码打开对话框:)

lossTheftDialog.dialog("open");

首次加载对话框时,红色 * 未显示。如果您关闭并重新打开对话框,则会显示红色 *。以类似方式构建的其他对话框也存在同样的问题。

其他详细信息:
当您单击其中一个必填字段时,* 会神奇地出现。如果您关闭对话框(通过单击“取消”按钮),则在对话框消失之前的那一刻,* 将根据需要显示。如果您从一个字段切换到另一个字段,所有 * 也会出现。

更多信息:
我无法链接到 jsfiddle,因为它在 IE8 中似乎不起作用。我尝试了上面的代码,但在 IE8 中根本没有给出 *。如果我在 tryit 编辑器 中尝试它,它似乎可以工作。

所以,这似乎是一个特定于我们元素中的对话框的问题,但我似乎无法将其隔离开来。我一整天都在谷歌上搜索和堆栈溢出并尝试了各种方法,但没有找到解决方案。

一种方法是使用 jQuery“触发器”来模拟点击,但是很遗憾。

非常感谢任何指点/提示/答案:)

jquery 版本:1.11.1(最低)
jquery 用户界面版本 1.10.4

确实使用<!DOCTYPE html>作为页面的第一行。

This is how the dialog shows up.

This is how it should look.

This is after clicking some 'required' fields.

对话框最初是这样显示的:(第一张图片)

这是它的外观(在关闭和打开对话框后出现)。 (第二张图)

这是单击一些必填字段后的对话框:(第三张图片)

编辑:(回复评论)对话框不是动态的;它应该只在第一次加载时显示所需的字段(带有红色 *),但如果您关闭并重新打开对话框或单击其中一个必填字段则不会显示。

更新:遇到相同问题的其他屏幕不会通过打开和关闭一个屏幕得到“治愈”。

最佳答案

找到了 :D

根据 Jonathan 的有用提示,我进一步搜索了一下,发现:this post .

我写了一点帮助方法:

function refreshRequireds(){
    $(".required").parents('tr').addClass('z').removeClass('z');
}

每次我打开一个对话框时,我都添加了这一行:

window.setTimeout(refreshRequireds,100);

现在 * 是(仅延迟 100 毫秒后)显示 :)))))

我希望其他人会觉得这篇文章有用...

S.

关于jquery - IE8 仅在事件触发后显示 css 内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27528735/

相关文章:

JavaScript 代码无法正常工作

jquery - 减少带有变量的 switch 语句?

javascript - 在图像中绘制和绘制区域

javascript - jQuery 工具 : Scrollable/Navigator items flowing out of the container

jquery - 有没有办法让固定位置的元素在窗口大小调整一定量后停止移动?

CSS - 将 2 个单选按钮变成 1 个开关

css - 在 IE 兼容模式下 form 脱离 div

jquery 设置文本

css - 如何给背景图片添加边框?

javascript - 如何在 IE 扩展中以编程方式设置断点?