當使用preventDefault時，單選按鈕被選中的屬性沒有設置

Question

我遇到的問題是我的場景中的單選按鈕在被單擊時未被選中。我創建了一個JSFiddle來顯示代碼和問題。

無論出於何種原因，我都有一個被元素包圍的整個區域。

<a href="/link"> 
    //some stuff 
    <div class="protected"> 
     <input type="radio" name="b1" value="1" /> Button 1 
     <input type="radio" name="b1" value="2" /> Button 2 
    </div> 
    //some stuff 
</a> 

此標籤中有一小部分需要受到保護以免受鏈接的默認行爲影響。本節包含一些需要選擇的無線電輸入。

我現在有它，我保護與事件偵聽器的「保護」部分和方式：

$('.protected').off('click').on('click', function (e) { 
    e.preventDefault(); 
}); 

我也有單選按鈕的事件偵聽器，這樣我可以執行的變化財產被點擊時。

$('.protected > :radio').off('click').on('click', function (e) { 
    $(this).siblings(':radio').removeAttr('checked'); 
    $(this).attr('checked', 'checked'); 
}); 

不幸的是，這是在dom中設置checked屬性，但單選按鈕未被填充到屏幕上供用戶使用。

任何幫助將不勝感激。

Answer 1

您需要添加stopPropagation()

$('.protected > :radio').off('click').on('click', function (e) { 
    e.stopPropagation(); 

    //$(this).siblings(':radio').removeAttr('checked'); 
    //$(this).attr('checked', 'checked'); 
}); 

此外，確保註釋掉

$(this).siblings(':radio').removeAttr('checked'); 
$(this).attr('checked', 'checked'); 

的瀏覽器爲您處理此你不需要他們。

DEMO

發生了什麼事是，因爲你必須在容器中單擊處理preventDefault，嵌套的單擊事件被傳播到單擊處理程序，並防止被設置的單選按鈕。