JQuery .append() - 元素失去样式

Question

I'm attempting to add elements to a div container however the elements ignore their css class.

JavaScript

$.each(jobs, function(i, job) 
{
    var option = '<div class="input"><div class="option">' + job.created +'</div></div>';
                    
    $('.options').append(option);
});

Html

<div class="options" style="overflow: scroll; width: 100%; height: 80%; background-color: White; text-align: left;">
   <div class="input">
        <div class="option">
             Hunt Osama.
        </div>
        </div>
   <div class="input">
        <div class="option">
             Execute without trial.
        </div>
   </div>
</div>

The elements are successfully appended to the div however the styling information is not acted upon.

EDIT: the classes input and option have no effect on the added elements.

Any hints?

Answer 1

I have tested your code on my machine and it works fine in IE & Firefox if I apply CSS to the children.

In my css file I have added the following declaration:

.option
{
    font-weight:bold !important;
    color: red;
}

Answer 2

This issue ended up being specific to WebKit/Qt on the windows mobile platform. It doesn't appear during a Android/WebKit example.

Sorry I have no further details on the cause of the problem.

Thanks for all the help.