JQuery addClass not working on anchor tag on click event

Question

addClass() is not working on jQuery on click event. My code looks like this.

 init: function () { ShareData.config.pageNo = 1; ShareData.ajaxCall(); $(document).on('click', 'ul#pagination li a', function () { ShareData.config.pageNo = $(this).text(); ShareData.ajaxCall(); $("ul#pagination li a.clickedLink").removeClass("clickedLink"); $(this).addClass('clickedLink'); }); }, var pageLink = ""; for (var i = 1; i <= totalPage; i++) { if (i == 1) { pageLink += "<li><a href='#' class='clickedLink'>" + i + "</a></li>"; } else { pageLink += "<li><a href='#' class=''>" + i + "</a></li>"; } } document.getElementById('pagination').innerHTML = pageLink; 

 .pagination ul li a.clickedLink { background-color: #BBB; } .pagination ul li a{ color: #000; height: 24px; line-height: 24px; width: 24px; text-align: center; display: inline-block; text-decoration: none; border: 1px solid #000; background: #FFF; text-shadow: none; } .pagination ul li { float: left; } 

 <div class="pagination"> <ul id="pagination"> </ul> </div> 

And output is like this

Everything is working fine on load while, i need to change the background of recently clicked anchor tag.

Answer 1

Here you go with a solution https://jsfiddle.net/dk5n4695/2/

 $('a').click(function(){ $('a[class="clickedLink"]').removeClass('clickedLink'); $(this).addClass('clickedLink'); }); 

 .clickedLink { background-color: #BBB; } ul li a{ color: #000; height: 24px; line-height: 24px; width: 24px; text-align: center; display: inline-block; text-decoration: none; border: 1px solid #000; background: #FFF; text-shadow: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> 

Answer 2

  $('ul#pagination li a').on('click', function () { $("ul#pagination li a.clickedLink").removeClass("clickedLink"); $(this).addClass('clickedLink'); }); 

 .clickedLink{ color:red } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="pagination"> <ul id="pagination"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> 

Answer 3

Try below and see if it works.

init: function () {
                ShareData.config.pageNo = 1;
                ShareData.ajaxCall();
                $(document).on('click', 'ul.pagination li a', function () {
                    ShareData.config.pageNo = $(this).text();
                    ShareData.ajaxCall();
                    $("ul.pagination li a.clickedLink").removeClass("clickedLink");
                    $(this).addClass('clickedLink');
                });
            },