javascript - JQuery addClass 不适用于点击事件上的 anchor 标记

Question

addClass() 在 jQuery 上的单击事件上不起作用。我的代码如下所示。

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>

输出是这样的

加载时一切正常，但我需要更改最近单击的 anchor 标记的背景。

Answer 1

这里有一个解决方案 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>