CSS not working in a dynamically created page

Question

I am new to JQuery Mobile and trying to build a simple app. Part of the codes as follows:

  <script type="text/javascript">
    $(document).ready(function(){
         $(".trycss").css({
            'background': 'red' });
    $.post("http://getcheckout.php", 
        function(data){
            var CheckOutListHTML ='<p class="trycss"> HELLO</p>';
                $('.class-ItemsList').append(CheckOutListHTML);
            },"json");
    });

</script>

<div data-role="page" id="id-ItemsPage">
    <div data-role="header" data-position="fixed">
        <h1>Items</h1>
    </div><!-- /header -->
    <div data-role="content">   
        <div class="class-ItemsList">
        </div>
    </div><!-- /content -->
</div><!-- /page -->

So, I am trying to use the "trycss" to style something I am creating dynamically. But it is not working. Can someone help?

Thanks.

RoToRa · Accepted Answer · 2012-04-13 11:26:30Z

1

Try following:

 <style>
   .trycss { background-color: red; }
 </style>
 <script type="text/javascript">
    $(document).ready(function(){
    $.post("http://getcheckout.php", 
        function(data){
            var CheckOutListHTML ='<p class="trycss"> HELLO</p>';
                $('.class-ItemsList').append(CheckOutListHTML);
            },"json");
    });

</script>

<div data-role="page" id="id-ItemsPage">
    <div data-role="header" data-position="fixed">
        <h1>Items</h1>
    </div><!-- /header -->
    <div data-role="content">   
        <div class="class-ItemsList">
        </div>
    </div><!-- /content -->
</div><!-- /page -->

edited Apr 13, 2012 at 11:26

RoToRa

38.5k12 gold badges73 silver badges110 bronze badges

answered Apr 13, 2012 at 9:04

Hardik Patel

8385 silver badges12 bronze badges

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

Comments

RoToRa · Accepted Answer · 2012-04-13 11:28:23Z

0

$(".trycss").css(... is executed once and applies styles (not "a style sheet") to all matching elements that exist at that point of time ans you don't you create your element until later on.

What exactly are you attempting to do? Why are you using $(".trycss").css(... and not a style sheet like @hardik suggests?

answered Apr 13, 2012 at 11:28

RoToRa

38.5k12 gold badges73 silver badges110 bronze badges

1 Comment

newpc100 Over a year ago

Yes, I should be using style sheet I guess. I am new to these stuff and is just trying different things out for my app.

Collectives™ on Stack Overflow

CSS not working in a dynamically created page

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related