Clever Geek Handbook

IE 11 treats pseudo content as part of an element's content

I'm having a problem that I don't have a solid solution for other than creating a workaround using data

-attributes. However, I find the behavior that I am encountering very strange and wondering if it has a better way.

Consider the following piece of code:

Html

<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());
    });
});

The problem I'm running into is IE 11 seems to use the content in the pseudo selector :after

as part of the content in the div. This means that when you click on the div, IE 11 will display a warning:

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

However, I expected to warn:

This is a test!

Both Firefox and Chrome display the latest warning. I would like to know if it is possible to make IE also display the last warning without using additional- data-

attributes or the like.

Here's FIDDLE .

+3


source to share


2 answers


Thanks to Mr. E's answer, I thought about a possible solution. I could take the content by html()

grabbing and then bundling it inside a dummy div

from which I grab again text()

. It seems like a whole bunch of things for something so simple, but it works.

Html

<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);
    });
});

See updated FIDDLE .

0


source


Try changing .text () to .html () like: Here . It works fine on IE 11.0.9600.17351 (with your version and with this version)

code:



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


source






More articles:


All Articles