为什么 jQuery 函数只在第一次被调用时才起作用？

Question

有一个链接，当单击该链接时，会在将 HTML 加载到 div 和清空 div 之间切换。当点击 div 加载 html 时，我使用 jQuery ajax load() 函数。加载文本时，我想显示“请稍候...”，所以我尝试使用 jQuery ajaxStart() 和 ajaxStop() 方法，但它们似乎只在第一次调用 load() 函数时才起作用。所以我切换到 ajaxSend() 和 ajaxSuccess，但这似乎也只在第一次调用加载函数时才起作用。怎么了？

HTML：

<p id="toggleDetail" class="link">Toggle Inspection Detail</p>
<p id="wait"></p>
<div id="inspectionDetail"></div>

jQuery:

$(
    function(){
        $('#toggleDetail').click(function(){
            if($.trim($('#inspectionDetail').text()).length)
            {
                $('#inspectionDetail').empty();
            }
            else
            {
                $('#inspectionDetail').load('srInspectionDetailFiller.cfm');
            }
        });
    }           
);

$(
    function(){
        $('#wait').ajaxSend(function() {
            $(this).text('Please wait...');
        });
    }
);
$(
    function(){
        $('#wait').ajaxSuccess(function() {
            $(this).text('');
        });
    }
);

Answer 1

您应该在您的click 函数中放置“请稍候...”消息，然后在您的load 成功完成后清除该消息：

$('#toggleDetail').click(function(){
    if($.trim($('#inspectionDetail').text()).length)
    {
        $('#inspectionDetail').empty();
    }
    else
    {
        $('#wait').text('Please wait...');
        $('#inspectionDetail').load('srInspectionDetailFiller.cfm', function() {
                $('#wait').text('');
        });
    }
});

编辑：虽然ajaxSend 在技术上应该在这里工作，但我不推荐它。使用ajaxSend，“无论要发送什么 Ajax 请求，都会调用所有 ajaxSend 处理程序”。在我看来，将所有 Ajax 请求挂接到您实际上只是想处理一次单击的页面上似乎有点过头了。