Changing CSS of a class is not effected when a dialog page is opened
<p>I have the following codes to read a list of color codes from the server and define a list of classes "cl-Colour" by setting the CSS background color. This codes work OK in that the classes are created with the correct CSS background color values.</p>

<pre><code>$.post("php/getSettings.php", 
  function(data){
   $.each(data, function(index,value){                  
      for (i=1;i&lt;=value.NumColours;i++) {           
        colours[i] = value.Colours[i].Code;
            $(".cl-Colour"+i).css("background-color",colours[i]);
       }
     });
   // First alert
   alert($('.cl-Colour1').css('background-color'));
   }
   ,"json");
</code></pre>

<p>Then, I have the following codes when I open a dialog:</p>

<pre><code> $( '#id-SettingsDialog' ).live( 'pageshow',function(event){
        ....................
    $element.addClass('cl-Colour1');
      // Second alert
       alert($('.cl-Colour1').css('background-color'));
}); 
</code></pre>

<p>The above code was intended to make use of the classes created in the earlier block of codes.</p>

<p>However, I found that in the first alert, I see value = "138.43.226" which is correct (ie, it corresponds to the color code I have set). But in the second alert, I get a value of "0,0,0".</p>

<p>It appears that the classes in the first block of codes is not visible in the dialog page.</p>

<p>The next thing I did, I added the following into the CSS file:</p>

<pre><code>.cl-Colour1 {
  background-color: #FE2EC8;
}
</code></pre>

<p>With this, the second alert will show "254,46,200" which seems to be the color defined in the CSS file.</p>

<p>So, how do I solve this problem?
In a nutshell, basically I want to define a set of classes of colors when the app loads and then make them available when I open a dialog.</p>

<p>Thanks.</p>
