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

【问题标题】：How can I retain a toggleClass event state after ajax call?如何在 ajax 调用后保留 toggleClass 事件状态？
【发布时间】：2015-12-11 17:02:26
【问题描述】：

假设我有以下 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/

【问题讨论】：

你的 ajax 调用在哪里？
有两种方法。首先：重新初始化事件监听器，就像在 ajax 调用 function myFunction() { $('a').on('click', .. 之后调用函数一样。第二：使用$(document).on('click', 'a', function(...并捕获文档上的点击事件。
@Chris 我想我正在做你在这里提到的第一种方法。第二个没看懂。
您必须为成功响应中单击的元素分配一个类名。切换元素会将类名分配给元素，但这不是持久的，所以在成功之后（也许页面重新加载，我不知道）并且元素没有附加类。如果您也发布您的 ajax 调用，我们会看到您如何处理这个问题，这将有所帮助。
您是否愿意阅读this 关于事件委托的内容。非常实用。

标签： javascript jquery ajax

【解决方案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');
    }  
});

【讨论】：