如何啓用和禁用AJAX上的div點擊事件成功

我有一個彈出窗口中的四個div，每次點擊都會對後端進行ajax調用並繪製右側。所有四次點擊都是按點擊次數分。當用戶點擊div時，我想禁用其他三個div直到這個ajax完成。一旦ajax成功，我想爲其他三個div啓用點擊事件。就像我想要做的所有四個div點擊。如何啓用和禁用AJAX上的div點擊事件成功

有時服務器的響應速度很慢，我不希望用戶點擊所有這些，並顯示所有這些指標。

任何類型的建議真的很感激。

感謝

來源

2010-10-20 kobe

你嘗試任何事情，沒有工作？ – 2010-10-20 05:08:16

我已經看到它完成的一個很好的方法，並且自己完成它是使用模態'蒙版'覆蓋。

覆蓋整個頁面的灰色透明遮罩，除了與之交互的元素外，例如，模態彈出窗口。

你可以在彈出窗口中做一個迷你版本，並使用CSS z-index將三個非活動div推到它後面。

還有一種方法是使用jQuery BlockUI plugin。

另一種方式，不推薦jQuery是async這將阻止瀏覽器本身。

var html = $.ajax({ 
    url: "some.php", 
    async: false 
}).responseText;

jQuery的也有，你可以寫你的負載指示代碼到.ajaxStart()和.ajaxStop()事件。

來源

2010-10-20 05:13:49

+1，我在回答他在談論div時忘了;我之所以在我的例子中使用'＃field_id'的原因:) – Sarfraz 2010-10-20 05:24:26

我會用一些全局gAjaxInProgress變量設置爲true當完成時的Ajax調用正在進行中，並false。在每個點擊功能中，你都可以檢查一個Ajax調用是否正在進行，如果有的話，返回。

來源

2010-10-20 05:13:03

jQuery已經有了.ajaxStart（）和.ajaxStop（）事件，您可以將加載指示器代碼寫入。 – 2010-10-20 05:17:08

我建議的一件事是在div上設置一個沒有意義的CSS類，然後讓jQuery在執行AJAX調用之前檢查這個類是否存在。示例（未經測試）：

$("#divContainer > div").bind('click', function() { 
    if($(this).hasClass('disabled-during-ajax')) 
     return; 
    $("#divContainer > div").addClass('disabled-during-ajax'); 
    $.get('somefile.php', {}, function(data) { 
     $("#divContainer > div").removeClass('disabled-during-ajax'); 
    }); 
});

來源

2010-10-20 05:17:24

var div1 = document.getElementById("div1"); 
//...grab the other divs... 

div2.onclick = false; 
div3.onclick = false; 
div4.onclick = false; 

function div2fcn() { alert('div2 activated'); } 

//When you're ready: 
div2.onclick = div2fcn;

來源

2010-10-20 05:26:24 Ben

這看起來像簡單的解決方案，我會試試這個。 – kobe 2010-10-20 05:27:41

如何啓用和禁用AJAX上的div點擊事件成功

回答

相關問題