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

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

1 个答案: