用ajax更新内容后，jQuery单击事件停止工作

Question

My application crashes when I try to hide an element which has dynamic content (ie. users list)

the element i'm trying to show and hide looks like this:

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

The jquery code I'm using is:

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

Users are updated frequently with an ajax call ( the li has a lot more content than just a name).

I've been searching for answers but none of the results seem to fix my problem, I've tried using several ways of hiding/unhiding the element, using $(document).on('click', '.group', function(){}) instead of .click() , disabling the .click() event untill the ajax call has completed, even with a timeOut of 3sec..

this is my Ajax, using ajaxQueue plugin

 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);
})

Any help or ideas would be greatly appreciated... :)

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
    });
});