Question

关于以下功能，我在过去一小时内重写了十几次：

function show_history() {
    $('.job.collapsed').click(function() {
        $(this).removeClass('collapsed');
        $(this).addClass('expanded');
        $(this).children('.bottom').load('expand.php', function(){
            $('.job.expanded').click(function() {
                $(this).removeClass('expanded');
                $(this).addClass('collapsed');
                $(this).children('.bottom').html('');
                $(show_history);
            });
        });
    });
}

我最初称之为：

$(document).ready(function() {
    $('#main').load('jobs.php', show_history);
});

我第一次点击'.job'，1个请求被发送到'expand.php'

第二次点击也会向'expand.php'发送1个请求，尽管'.job'没有'.collapsed'类。

第3次点击发送2个请求，第4次发送3个请求，第5次发送6个请求，第6个发送9个请求，第7个发送18个请求，第8个发送27个请求，等等。

我希望它在点击折叠的作业时发送1个请求，而在单击展开的作业时没有请求。

我该如何解决这个问题？

修改

我使用的解决方案，基于@ mblase75的建议：

function show_history() {
    $('.job.collapsed').live('click',function() {
        $(this).removeClass('collapsed');
        $(this).addClass('expanded');
        $(this).children('.bottom').load('expand.php');
    });
    $('.job.expanded').live('click',function() {
        $(this).removeClass('expanded');
        $(this).addClass('collapsed');
        $(this).children('.bottom').html('');
    });
}

Answer 1

尝试将.click移出回调并将其替换为.live("click")处理程序：

   $('.job.expanded').live('click',function() {
        $(this).removeClass('expanded');
        $(this).addClass('collapsed');
        $(this).children('.bottom').html('');
        $(show_history);
   });
   $(this).children('.bottom').load('expand.php');

Answer 2

我认为代码中存在一个可能的缺陷：“。job.expanded”是一个类，我认为它被赋予同一页面中的多个项目。因此，$（this）将适用于页面中的所有项目

可能的解决方法：

 $('.job.expanded').live('click',function() {
 var $thisID = $(this.id);
 $thisID.removeClass('expanded');
 $thisID.addClass('collapsed');
 $thisID.children('.bottom').html('');
 $(show_history);
 });

哦，是的，我在修复自己的类似代码上失去了一堆头发，希望能为你节省一些......

递归ajax调用

2 个答案: