IE 11将伪内容视为元素内容的一部分。

Question

我遇到了一个问题，除了使用data-attributes创建一个解决方案之外，我没有一个可靠的解决方案。然而，我发现我遇到的行为非常奇怪，并怀疑是否有更好的方法绕过它。

请考虑以下代码：

<div id="test">This is a test!</div>

CSS

#test:after
{
    content: "...This shouldn't be part of text()!";
}

JS

$(document).ready(function () {
    $(document).on("click", "#test", function () {
        alert($(this).text());
    });
});

我正在处理的问题是，IE11似乎将:after伪选择器中的内容作为div中内容的一部分。这意味着当单击div时，IE 11将显示一个警告，上面写着：

This is a test!...This shouldn't be part of the text()!

不过，我本以为会有这样的警告：

This is a test!

Firefox和Chrome都在显示后一个警报。我想知道是否有可能让IE也显示后一个警报，而不使用额外的data-，-attributes或类似的东西。

下面是这个例子的小提琴。

Answer 1

由于E先生的回答，我想出了一个可能的解决办法。我可以通过获取html()来获取内容，然后将其重新包装在一个虚拟的div中，然后再从其中获取text()。对于这么简单的事情，似乎有一大堆事情要做，但它起作用了。

<div id="test"><span>This is a test!</span></div>

JS

$(document).ready(function () {
    $(document).on("click", "#test", function () {
        var html = $(this).html();
        var text = $("<div />").html(html).text();
        alert(text);
    });
});

请参阅此更新的小提琴。

Answer 2

尝试将.text()更改为.html()，如：这里。它在IE11.0.9600.17351(与您的版本和此版本)上运行良好。

代码：

$(document).ready(function () {
    $(document).on("click", "#test", function () {
        alert($(this).html());
    });
});