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

时间:2011-05-22 17:10:50

标签: jquery

假设这是我的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(),以便divclass="menu"的所有ajaxStart()分配ajaxStop(),最终分配div jQuery事件

我的问题是,我希望在ajax事件运行时显示某种进度(文本或进度gif),但不是在class="menu" id id=info上,而是在特定{{1}上显示我已经点击了。让我们说,例如我点击div div,进度只应显示在{{1}}上。

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

JSFIDDLE

的示例

1 个答案:

答案 0 :(得分:1)

“ajax”事件没有必要这样做;只需在“点击”处理程序中执行此操作。

$('#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">lonewolfs.glory@gmail.com</div><div id="messagebody"></div>'
    }, function(data) {
        $('body').append($(data).filter('#email'));
        $clicked.text("Done...!");
    });
});

“ajax”事件对于做某些事情很有用,但在这种情况下确实没有意义,而且这只是一个额外的难度。问题是真正的“点击”事件和合成的“ajaxStart”和“ajaxStop”事件之间绝对没有内在联系,因此无法知道为什么“ajaxStart”正在发生。既然你有一个“点击”处理程序,并且确实知道所涉及的元素,那么这是最好的工作场所。