在bootstrap中檢測無線電輸入（帶有標籤樣式爲按鈕）的更改事件4

Question

根據標題，我試圖在this jsfiddle中檢測到一個更改事件（在檢查DOM時似乎沒有發生） 。無線電輸入採用引導類進行設計。爲什麼我沒有得到改變？

僅供參考，這裏的一些代碼：

<div class="btn-group" data-toggle="buttons"> 
    <label class="btn btn-sm btn-primary active"> 
    <input type="radio" name="preview" id="preview-enabled" value="true" autocomplete="off" checked>Alice 
    </label> 
    <label class="btn btn-sm btn-secondary"> 
    <input type="radio" name="preview" id="preview-disabled" value="false" autocomplete="off">Bob 
    </label> 
</div> 

被點擊的按鈕後，輸入收音機並沒有改變。

我也得到一個奇怪的錯誤是jQuery是需要引導的JS（但jQuery是包括前引導的JS按照the official instructions）

Answer 1

的「選中」輸入radio元素的屬性沒有改變（因此不會觸發eventListener）;它是那個改變的元素的underlying DOM propertychecked。

因此，您可能認爲解決方案是使用MutationObserver監聽該節點上DOM屬性的更改。但this doesn't work either，因爲它不是在DOM的變化，只是一個狀態的變化。看起來（沒有使用像React這樣的陰影DOM框架）沒有辦法在沒有輪詢的情況下跟蹤它。