使用 ajax 更新内容后，Jquery 点击事件停止工作

Question

当我尝试隐藏具有动态内容的元素（即用户列表）时，我的应用程序崩溃

我试图显示和隐藏的元素如下所示：

<a href="#" class="group">Users</a>
<ul id="staff">
 <li>User1</li>
 <li>user2</li>
</ul>

我使用的 jquery 代码是：

$('.group').click(function(e){
 e.preventDefault();
 $(this).siblings('ul').toggleClass('hidden');
});

通过 ajax 调用频繁更新用户（li 的内容远不止一个名称）。

我一直在寻找答案，但似乎没有一个结果能解决我的问题， 我尝试使用几种隐藏/取消隐藏元素的方法，使用$(document).on('click', '.group', function(){}) 而不是.click()，禁用.click() 事件，直到ajax 调用完成，即使timeOut 为3 秒..

这是我的 Ajax，使用 ajaxQueue 插件

 working = true;
$.ajaxQueue({
    type: 'post',
    dataType: 'json',
    url: './api/users'
}).done(function(r)
{
            $('#staff').empty(); 
    $.each(r, function(i)
    {
        var addnew = $('<li>').addClass('ind-bg');
  var newDiv = $('<div>').addClass('ind').appendTo(addnew);
    $('<img>').attr('src', r[i].picture).addClass('userPicture').appendTo(newDiv);
    $('<i>').addClass('batch status'+r[i].status).attr('data-icon', '').appendTo(newDiv);
    $('<span>').html(r[i].firstName + ' ' + r[i].name).appendTo(newDiv);
    addnew.appendTo($('#staff'));
    })
setTimeout(function(){working = false}, 3000);
})

任何帮助或想法将不胜感激... :)

Answer 1

$(function () {
    $(document).bind("ajaxSend", function (e) {
        e.preventDefault();
        //make what you want to hide
    });
    $(document).bind("ajaxStop", function () {
       //make what you want to show
    });
});