jQM 1.4 listitem color on click

by Erik Zanker

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<div data-role="page" id="page1">
    <div data-role="header">
         <h1>My page</h1> 
    </div>
    <div role="main" class="ui-content">
        <ul id="mylist" data-role="listview" data-split-theme="c">
            <li>
                <a href="#">mahindra Scorpio</a>
            </li>
            <li><a href="#">BMW</a>
            </li>
            <li><a href="#">Audi</a>
            </li>
            <li><a href="#">BenZ</a>
            </li>
        </ul>
    </div>
</div>

CSS

.activeLI .ui-btn {
    background-color: #CFF09E !important;
}
.activeLI .ui-btn:hover {
    background-color: #A8DBA8 !important;

}

JavaScript

$(document).on("pagecreate", "#page1", function () {

    $("#mylist").on("click", "li", function(){        
        $(this).toggleClass("activeLI");
    });
    
});