單選按鈕集jQuery點擊/更改功能

Question

我有一個單選按鈕集稱爲「pick_up_point」。有3個選項，點擊一個選項將顯示一組與該選項相關的輸入字段。

現在默認情況下，當用戶點擊一個選項時，我運行change（）函數，它將運行一個名爲「clearInputFields」的函數 - 您可能會猜到將清除輸入字段中輸入的任何文本。

$("input[name='pick_up_point']").change(function() 
{ 
clearInputFields(); 
}); 

現在，我已經試過，這樣的提示顯示給用戶擴展這讓他們知道，輸入字段將被清除：

$("input[name='pick_up_point']").click(function(event) 
{ 
if(confirm('Address details will be cleared. Continue?')) 
{ 
    return true; 
} 
else 
{ 
    return false; 
} 
}); 

「點擊」功能是之前的「改變'功能。

這在Firefox中「OK」，在IE中無法正常工作。

在Firefox中，選中單選按鈕並顯示提示，單擊取消按鈕將返回到前一選項，並保留所有值。

在IE中，單選按鈕被選中並顯示提示，但值被清除。如果您單擊取消，則不選中單選按鈕。

我想這樣工作的方式是，如果你點擊另一個單選按鈕，它不應該選擇它，除非你在提示上單擊確定。如果您單擊取消，則應保留這些值。

Answer 1

在IE瀏覽器中，change事件的複選框和單選按鈕不會立即觸發，但只有後場一直沒有重點。這樣就像文本輸入框一樣。

jQuery猴子與change事件相當顯着，以一種隱藏你的行爲。但是，它無法準確地再現IE中其他瀏覽器的行爲，因此在某些情況下，即使在另一個click事件處理程序試圖阻止默認設置時，它也會觸發change以響應與某個元素的交互。

另一個問題：在IE中，如果你在單選按鈕上有return false從click，那麼新的單選按鈕將不會被檢查，但是上一個按鈕仍然會失去它的檢查，而沒有檢查到收音機！

所以你可能不得不做一些惱人的狀態跟蹤，並且當確認被拒絕時手動將單選按鈕恢復到它們的舊狀態。例如：

var currentradio= $("input[name='pick_up_point']:checked")[0]; 
$("input[name='pick_up_point']").change(function(event) { 
    var newradio= $("input[name='pick_up_point']:checked")[0]; 

    if (newradio===currentradio) 
     return; 
    if (confirm('Address details will be cleared. Continue?')) { 
     clearInputFields(); 
     currentradio= newradio; 
    } else { 
     currentradio.checked= true; 
    } 
}); 

Answer 2

爲了確保選擇實際發生了變化，將在.change事件處理函數中調用函數，並移除.click事件處理函數。

$("input[name='pick_up_point']").change(function(event) 
{ 
if(confirm('Address details will be cleared. Continue?')) 
{ 
    clearInputFields(); 
    return true; 
} 
else 
{ 
    return false; 
} 
}); 

不是很確定你需要返回xx語句，但我不知道你的其他代碼庫，所以我把它們留在那裏。

編輯：

爲了證明.change V字形。點擊效果（實際的變化），我已經把一個小演示在這裏：

http://jsfiddle.net/KMjan/

注意計數器增量和顯示在底部（不花哨，但演示點）

編輯2：添加了一些指示調用清除功能的事件內的.click和.change

http://jsfiddle.net/KMjan/1/

EDIT3：增加了又一例證，我在事件泡沫的背景顏色設置爲父div來展示的返回值的效果（true和false） - 只需點擊同一個單選按鈕多次，並且更改 - 使用否定和肯定答案查看每個選擇的結果。

http://jsfiddle.net/KMjan/3/

這些顯示您可能要進行調查，如果效果所需的沒有事件傳播史方法的需要。
看到這個頁面的詳細信息，事件傳播史： http://api.jquery.com/category/events/