I have a dynamic list that triggers a JavaScript function using the onclick event. However, I am struggling to change the color of the selected item in the list.
Here is an example of the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>`enter code here`
<script src="scripts/jquery.js" type="text/javascript"></script>
<link href="stylesheets/jquery.mobile.css" rel="stylesheet" type="text/css" />
<script src="scripts/jquery.mobile.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
var $al = $("#mylist");
$al.append("<li ><a id='a1' href=\"#\" rel=\"external\" onclick=\"test('selected test 1'); return false\">TEST 1</a></li>");
$al.append("<li ><a id='a2' href=\"#\" rel=\"external\" onclick=\"test('seleced test 2'); return false\">TEST 2</a></li>");
});
function test(text) {
$("#divtest").html(text);
}
$("#myList li a").click(function () {
$('#myList li > div').each(function (index) {
$(this).removeClass("ui-btn-active");
});
var p = $(this).parent();
$(p).addClass('ui-btn-active');
});
</script>
</he`ad>
<body>
<div data-role="page" id="profile">
<div data-role="header" data-position="fixed">
</div>
<!-- /header -->
<div data-role="content">
<ul id="mylist" data-role="listview" data-inset="true">
</ul>
</div>
<div id='divtest'>
</div>
<!--/content-->
<div data-role="footer" data-position="fixed">
</div>
<!--/footer-->
</div>
</body>
</html>