CSS不能在動態創建的頁面中工作

Question

我是JQuery Mobile的新手，嘗試構建一個簡單的應用程序。部分代碼如下：

<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 --> 

所以，我試圖使用「trycss」來設計我動態創建的東西。但它不起作用。有人可以幫忙嗎？

謝謝。

Answer 1

嘗試以下操作：

<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 --> 

Answer 2

$(".trycss").css(...被執行一次，並應用樣式（不是「樣式表」），以存在在那個時間點的所有匹配的元素ANS你沒有創建您元素，直到後來。

你究竟想要做什麼？你爲什麼使用$(".trycss").css(...而不是像@hardik建議的樣式表？