Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Chris Mason
.a{fill-rule:evenodd;}techdegree seal-36
Chris Mason
Full Stack JavaScript Techdegree Graduate 24,526 Points

Inserting html with jQuery but css styles not being applied to the inserted html

Hi, I'm using jQuery's .insertAfter() to place some html but the CSS styles aren't then being applied to the inserted HTML.

If I write the html code directly into the html file it works fine, just not when added via jQuery. Been scratching my head for a while on this one. Any pointers?

jQuery

$( document ).ready(function() {
    $("<div class='student search'><input placeholder='Search for students...'><button>Search</button></div>").insertAfter(".header");
});

The CSS

  .page-header .student-search{
    float: right;
  }

    .page-header .student-search input{
      border-radius: 5px;
      border: 1px solid #eaeaea;
      padding: 8px 15px;
      font-size: 14px;
    }

    .page-header .student-search button{
      border-radius: 5px;
      border: 1px solid #eaeaea;
      padding: 8px 15px;
      font-size: 14px;
      background-color: #4ba6c3;
      color: #fff
michael miday
michael miday
6,649 Points
michael miday
michael miday
6,649 Points

please provide the html as well as this may provide insights into what is wrong

Chris Mason
.a{fill-rule:evenodd;}techdegree seal-36
Chris Mason
Full Stack JavaScript Techdegree Graduate 24,526 Points 
<body>
    <div class="page">
      <div class="page-header cf">
        <h2>Students</h2>
      </div>
   </div>
</body>

3 Answers

Yannick Tonta
Yannick Tonta
1,448 Points
Yannick Tonta
Yannick Tonta
1,448 Points

In your css you're using .page-header, but you're inserting after .header in you JS. Might be an issue with the class names in your files.

Mindy Sandilands
Mindy Sandilands
15,743 Points
Mindy Sandilands
Mindy Sandilands
15,743 Points

In your CSS you may try adding a comma between your two classes.

.page-header , .student-search

I think your .student-search styles are not being recognized because of this syntax error.

michael miday
michael miday
6,649 Points
michael miday
michael miday
6,649 Points

there is no header class in your html...