jQuery：ajax事件

Question

好的，这是我的代码

$("#content_Div").ajaxStart(function () {
    $(this).css('cursor', 'wait')
}).ajaxComplete(function () {
    $(this).css('cursor', 'default')
});

这是一个相当简单的问题：在ajaxStart事件中，光标立即变成（等待）沙漏，但在ajaxComplete事件中，直到您移动鼠标才会恢复默认状态。

哈哈，这就是我的问题，但当我写这篇文章时，我意识到，在ajaxComplete事件之后，如果您单击它，它将恢复默认状态，所以光标之所以会在ajaxStart事件开始后立即更改，是因为您必须双击内容_Div中的元素才能开始请求，因此单击事件是在ajaxStart事件开始后更改光标的。所以我想要一种在不必移动或再次单击的情况下更改光标的方法。

显然，我希望使用光标来通知用户请求何时完成。

提前感谢。

function DF() { //Deletes selected File
if (selectedfiles.length == 0) {
    alert("No file slected!");
    return
};
var selectedtxt = (selectedfiles.length == 1) ? "'" + basename(selectedfiles[0]) + "'?" : 'these ' + selectedfiles.length + ' files?';
if (confirm("Are you sure you want to delete " + selectedtxt)) {
    $.each(selectedfiles, function () {
        $.post("server/editfile.php", {
            user: user,
            oper: "del",
            path: "../" + this
        }, function (res) {
            if (res) {
                alert(res);
            }
            else LT(dirHistory[current]);
        });
    })
}

}

- dlaurent86

---

你能发布一下你的Ajax请求代码吗？通常情况下，如果我有一个加载屏幕（或者在你的情况下，你想改变鼠标指针），你可以在那里面做。在运行Ajax之前，把鼠标指针改为“等待”，然后当函数返回成功时（通常只是success: function() {}），再把它改回去。 - Thomas Clayson

Thomas，我会尝试一下，但是鼠标指针会自动改变吗？还是必须要点击或移动鼠标才能改变指针？ - dlaurent86

我有很多不同的请求，而不是每个请求都进行编辑，我希望能够在全局范围内设置一次Ajax事件。 - dlaurent86

Answer 1

看起来用户必须移动光标才能改变，但除此之外，还有另一个问题。如果用户将光标移出#content_Div，则无法看到数据是否正在加载，因为CSS仅在悬停在该特定DIV上时应用。

一种明确显示数据正在获取的方法，无论用户做什么，都是使用动画gif，“正在加载...”字母或两者兼而有之。这个解决方案也比更改用户的光标稍微不那么侵入性。

例如，如果在请求数据时将加载图像附加到将显示数据的div中，则此加载图像将自然消失一次数据加载完成。：

$("#content_Div").ajaxStart(function () {
    $("#content_Div").append('<img src="loading.gif" />');
});

在这种情况下，不需要使用ajaxStop，因为加载的数据会替换图像。 这里有一个 jsFiddle 示例，同时使用了图像和字母排版。 jsFiddle 示例，包含多个按钮和位于页面中心的加载 div。

- Peter Ajtai

Answer 2

我宁愿更优雅地这样做：

$(function(){  
  $("html").bind("ajaxStart", function(){  
     $(this).addClass('busy');  
   }).bind("ajaxStop", function(){  
     $(this).removeClass('busy');  
   });  
});

CSS：

html.busy, html.busy * {  
  cursor: wait !important;  
}  

Source: http://postpostmodern.com/instructional/global-ajax-cursor-change/

- Korayem

Answer 3

好的，我已经发布了这个问题大约5个小时了，但是没有人尝试回答它。所以我只能发布我所发现的。

这是一个Google Chrome和Safari的Bug。 chromium

在所有其他浏览器中，您可以动态更改鼠标光标，而无需用户单击或移动鼠标。

这打败了我想要做的事情。当请求完成时通知用户，如果用户将手从鼠标上拿开并等待光标更改，他们将一直等到白天和黑夜或者直到他们尝试离开，因为他们认为我的网页被冻结了。由于如果您检查上面的链接，该错误仍未得到确认，因此没有解决方法，所以我就这样做了。

$("#content_Div").ajaxStart(function () {
    if(!$.browser.safari)//ignores ajaxStart if browser is safari or chrome
    $(this).css('cursor', 'wait')
}).ajaxComplete(function () {
    $(this).css('cursor', 'default')
});

- dlaurent86

---

大多数网站的行为不是这样的——当进行 AJAX 请求时，通常会显示一些“正在加载”的图像，并且当请求完成后，该图像会消失。 顺便说一下：你可以在 http://ajaxload.info/ 免费下载此类图像。 - dmitko