通过类选择器分配 jQuery ajaxStart 并通过 id 选择器操作结果

Question

>假设这是我的html

<div id="menu">
    <div id="photo"></div>
    <hr/>
    <div id="info" class="menu">Info</div>
    <div id="msg" class="menu">Message</div>
    <div id="files" class="menu">Files</div>
    <hr/>
</div>

我想分配$('.menu').ajaxStart()，以便所有带有class="menu"的div都被分配ajaxStart()，并最终分配ajaxStop() jQuery事件'

我的问题是我想在 ajax 事件运行时显示某种进度（文本或进度 gif），但不是在所有class="menu" div上，而是在我单击的特定id上。 例如，假设我单击div id=info进度应仅在该div上显示。

我怎样才能做到这一点？ 提前谢谢。

JSFIDDLE 示例

Answer 1

没有必要对"ajax"事件执行此操作;只需在"click"处理程序中执行此操作即可。

$('#info').click(function(){
    var $clicked = $(this);
    $clicked.text('Requesting...');
    $.post('/echo/html/', {
        html: '<div id="username">lonewolfs</div><div id="firstname">Lone</div><div id="lastname">WOLFs</div><div id="sex">1</div><div id="dob">1982-10-20</div><div id="address">Bahamas</div><div id="city">XYZ</div><div id="state">StateXYZ</div><div id="country">USA</div><div id="phone">9999999999</div><div id="email">[e-mail]</div><div id="messagebody"></div>'
    }, function(data) {
        $('body').append($(data).filter('#email'));
        $clicked.text("Done...!");
    });
});

"ajax"事件对于执行某些类型的事情很有用，但在这种情况下，实际上没有意义，它只是一个额外的困难。问题在于，真正的"click"事件与合成的"ajaxStart"和"ajaxStop"事件之间绝对没有内在关系，因此无法知道"ajaxStart"发生的原因。由于无论如何您都有一个"单击"处理程序，并且它确实知道所涉及的元素，因此这是完成工作的最佳位置。