如何在ajax调用后保留toggleClass事件状态？

Question

说我有以下HTML

<div class="row">
  <div class="link grey">
    <a href="#">Link</a>
  </div>
</div>
<div class="row">
  <div class="link">
    <a href="#">Link</a>
  </div>
</div>
<div class="row">
  <div class="link">
    <a href="#">Link</a>
  </div>
</div>
<div class="row">
  <div class="link grey">
    <a href="#">Link</a>
  </div>
</div>

我希望能够单击链接，更改背景颜色并在ajax成功时保留该状态（单击链接时会发生ajax调用）。但是现在，在ajax成功之后，之前的状态就出现了。

成功之后，我正在调用处理事件的函数

function ajaxOnSuccess(data) {
$(document).ready(function(){
    $('a').on('click', function(){
    $(this).closest('.link').toggleClass('grey');
  });
});
}

JSFiddle：http://jsfiddle.net/mzg2zk48/

Answer 1

我认为您的javascript应该如下。希望这会有所帮助。

$(document).ready(function(){
    $('a').on('click', function(){
        //ajax call goes here
        //ajax successs call ajaxOnSuccess(this) function
    });

    function ajaxOnSuccess(elm) {
        $(elm).closest('.link').toggleClass('grey');
    }  
});