jQuery的：AJAX事件

Question

確定這裏是我的代碼

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

這是一個相當簡單的問題：在ajaxStart光標立即切換到（等待）沙漏但ajaxComplete它不更改回defalut直到您移動鼠標。

lol dat是我的問題，但我寫這個時，我意識到ajaxComplete後，如果你點擊它會改回默認，所以光標在ajaxStart上立即改變的唯一原因是因爲你必須雙擊一個元素content_Div爲了啓動請求，所以點擊事件是wat在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]); 
     }); 
    }) 
} 

}

Answer 1

確定它已經大約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') 
}); 

Answer 2

它不會出現，用戶必須將光標移動在改變之前，但除了這個，還有另外一個問題。如果用戶將光標從#content_Div上移開，那麼他們將無法查看數據是否正在加載，因爲CSS僅適用於懸停在該特定DIV上的數據。

無論用戶做什麼，清楚地顯示數據被提取的方法都是使用動畫gif，「正在加載....」字樣，或兩者都使用。與改變用戶的光標相比，這種解決方案也不那麼幹擾。

如果當請求數據時，您會將一個加載圖像附加到將顯示數據的div上，那麼一旦加載數據，該加載圖像自然會消失。例如：

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

在這種情況下，由於加載的數據替換圖像，所以不需要ajaxStop。

Here is a jsFiddle example that makes use of both an image and lettering.

jsFiddle with multiple buttons and a loading div at the center of the page.

Answer 3

我寧願做更優雅，像這樣：

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

CSS：

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

來源： http://postpostmodern.com/instructional/global-ajax-cursor-change/