CSS not applying on Javascript created element

Question

I insert fields on my page using the JQuery .html() function. The fields have a class attribute, but it seems like the CSS, which is declared in the header part of the page doesn't apply to the element.

I believe it just impact class selector, since I have a #editZone input selector that work like a charm.

Here's a code sample:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style type="text/css">
    #editZone input, #editZone textarea, #editZone select{
        border:0px;
    }

    #editZone .dependant {
        background-color:#CCC;
        border-bottom:1px solid #333;
    }
    #editZone .original {
        background-color:#FFF;
        border-bottom:1px solid #300;
    }
</style>

</head>
<body>

    <div id="headZone">
        Template:
        <select id="template">
        </select>
        <input type="button" id="generateTpl" value="Go" />
    </div>
    <div id="editZone" style="background-color:#ccc;">content will be filled here upon template selection</div>
    <div id="previewZone">final</div>
</body>
</html>

Here's a content sample (from firebug):

<div style="background-color:#ccc;" id="editZone"><br>
<br>
Name - <input type="" class="original" value="" name="first_name" id="first_name_1"> <input type="" class="original" value="" name="last_name" id="last_name_1"><br>
Title<br>
...

Question is about jQuery, but you don't show your jQuery code? — Ruan Mendes
– Ruan Mendes, Commented Nov 16, 2012 at 21:04
Well considering that the content does populate, I didn't want to polute the question with javascript code that work... — FMaz008
– FMaz008, Commented Nov 16, 2012 at 21:08
You should use the tools in your browser to examine the effective style rules of your dynamically-added elements. — Pointy
– Pointy, Commented Nov 16, 2012 at 21:10
Chances are your elements aren't being appended where you think they are. (which we could confirm if you provided js code) — user400654
– user400654, Commented Nov 16, 2012 at 21:12

Rikki · Accepted Answer · 2012-11-16 21:06:29Z

1

You should close the html tags and I think it should work then. Close the tags like "<tagname />" or "<tagname></tagname>". I mean input, br and all the opened tags are not closed.

Hope it helps.

Cheers

answered Nov 16, 2012 at 21:06

Rikki

3,5681 gold badge25 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Pointy Over a year ago

<input>, <br>, and many other tags do not have to be closed. Self-closing tags are not meaningful in HTML5.

Rikki Over a year ago

Thank you for mentioning that @Pointy, but I think answer is not flagged as HTML5. Am I right?

Pointy Over a year ago

It has the HTML5 DOCTYPE at the top :-)

FMaz008 Over a year ago

... and I do have closing tag, but the part that you see is the firebug dump that remove them...

Rikki Over a year ago

Yeah, but maybe the user doesn't now himself that it's the doctype of HTML5. ;)

FMaz008 · Accepted Answer · 2012-11-16 23:11:15Z

1

In the style declaration, I had a weird space between the class name and the {.

answered Nov 16, 2012 at 23:11

FMaz008

11.3k19 gold badges73 silver badges106 bronze badges

Collectives™ on Stack Overflow

CSS not applying on Javascript created element

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related