javascript - 使用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 调用完成，即使超时为 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
    });
});