2012-02-10 61 views
1

在我的代碼中,我有一個綁定到文本框focusout事件的Ajax查找。如果提供的數據無效,則Ajax請求將顯示錯誤消息。我還在表單上有一個「取消」按鈕,單擊時隱藏一些字段,包括帶請求的字段。但是,如果在文本框中指定了無效值,則單擊取消按鈕將觸發Ajax請求(因爲文本框失去焦點)並顯示錯誤消息。如何在點擊某個按鈕時忽略jQuery事件?

我想,當我點擊取消按鈕,這阿賈克斯事件解僱,所以即使用戶輸入了無效的條目形式會「閉合」沒有錯誤消息顯示。

這可能嗎?

代碼是這樣的,基本上是:

$('#txtPostalCode').focusout(function() { 
    postalCodeLookup($(this).val()); // ajax method wrapper 
}); 

$('button#cancelButton').click(function() { 
    $('#txtPostalCode').attr('disabled', true).addClass('disabled'); // applies CSS style to make textbox look like a label 
    $('#txtPostalCode').val($('#oldPostalCode').val()); // restore old value 
}); 

,因爲我自從點擊之前,事件的內容大火說,你不能「取消」的形式,如果有在文本框中的無效條目,因爲它會火ajax請求並提出錯誤消息。這個問題是出於可用性的角度,因爲有人可能輸入無效的郵政編碼,意識到他們的錯誤,然後嘗試取消該表格,但表單不會取消它自己,直到他們輸入有效的郵政編碼當表單實際取消時,它就會被重寫)。

如果有更好的方法來處理我想做的事情我完全聽到這個爲好,這是我收到的要求:)

+2

你可以發佈一些代碼? – 2012-02-10 16:16:10

回答

0

那突然出現在腦海的第一件事,這可能是一個小哈克,但我會設置一個變量,打開和關閉懸停在取消按鈕。然後在你的focusout代碼中放一個if塊,只有當前面提到的變量爲false時才允許它被觸發。

1

focus事件將在取消按鈕的click事件之前觸發,因此除了放棄ajax請求外,您無法執行其他任何操作。在XHR對象上調用abort方法會中止當前請求。

或者,您可以有一些延遲,然後觸發在focusout事件上的ajax請求,並在您點擊取消按鈕的時間內清除超時。

就是這樣。

$(function(){ 
    var xhr; 
    $('input').focusout(function(){ 
     xhr = $.ajax({ 
       ... 
       }); 
    }); 

    $('.cancel').click(function(){ 
     xhr.abort(); 
     //other stuff 
    }); 
}); 

或者

$(function(){ 
    var timeoutId; 
    $('input').focusout(function(){ 
     timeoutId = setTimeout(function(){ 
      $.ajax({ 
       ... 
      }); 
     }); 
    }); 

    $('.cancel').click(function(){ 
     clearTimeout(timeoutId); 
     //other stuff 
    }); 
}); 
+0

選項2對我很有幫助。謝謝你,先生。 – 2012-11-05 16:08:05