title: Jquery Mobile ListView Seleted Item CSS Color
body: <p>I am creating a list dynamically. I used the onclick event to call a javascript and this works, what I can not do is get the selected item from the list to have a different color.</p>
  
  <p>This is the code example:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;`enter code here`
      &lt;script src="scripts/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;link href="stylesheets/jquery.mobile.css" rel="stylesheet" type="text/css" /&gt;
      &lt;script src="scripts/jquery.mobile.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script&gt;
  
          $(document).ready(function () {
              var $al = $("#mylist");
              $al.append("&lt;li &gt;&lt;a id='a1' href=\"#\" rel=\"external\" onclick=\"test('selected test 1'); return false\"&gt;TEST 1&lt;/a&gt;&lt;/li&gt;");
              $al.append("&lt;li &gt;&lt;a id='a2' href=\"#\" rel=\"external\" onclick=\"test('seleced test 2'); return false\"&gt;TEST 2&lt;/a&gt;&lt;/li&gt;");
          });
  
          function test(text) {
              $("#divtest").html(text);
          } 
  
          $("#myList li a").click(function () {
                  $('#myList li &gt; div').each(function (index) {
                      $(this).removeClass("ui-btn-active");
                  });
                  var p = $(this).parent();
                  $(p).addClass('ui-btn-active');
              });
  
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div data-role="page" id="profile"&gt;
          &lt;div data-role="header" data-position="fixed"&gt;
          &lt;/div&gt;
          &lt;!-- /header --&gt;
          &lt;div data-role="content"&gt;
              &lt;ul id="mylist" data-role="listview" data-inset="true"&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div id='divtest'&gt;
  
          &lt;/div&gt;
          &lt;!--/content--&gt;
          &lt;div data-role="footer" data-position="fixed"&gt;
          &lt;/div&gt;
          &lt;!--/footer--&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>