Home/ Questions/Q 9147711
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T11:03:52+00:00

I am creating a list dynamically. I used the onclick event to call a

  • 0

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.

This is the code example:

<!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>
</head>
<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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    To do this you need to call .addClass and .removeClass from your list item. Depending on the color you want you will have to remove/add certain classes. For starters you can add the class ui-btn-active to the items.

    • 0