javascript - 在 bootstrap 4 中检测 radio 输入的更改事件(带有按钮样式的标签)

Question

根据标题，我正在尝试检测 this jsfiddle 中的更改事件(当我检查 DOM 时似乎没有发生) 。 radio 输入使用 Bootstrap 类来设计样式。为什么我没有得到改变？

作为引用，这里有一些代码:

<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>

单击按钮时，输入单选按钮不会更改。

我还收到一个奇怪的错误，即 bootstrap 的 js 需要 jquery(但是按照 the official instructions 在 bootstrap 的 js 之前包含 jquery)

Answer 1

输入radio元素的“checked”属性不会改变(因此不会触发eventListener)；这是 underlying DOM property 检查了发生变化的元素。

您可能会认为解决方案是使用 MutationObserver 监听该节点上 DOM 属性的更改。 。然而this doesn't work either ，因为这不是 DOM 的变化，只是状态的变化。而且似乎(不使用像 React 这样的影子 DOM 框架)没有办法在不轮询的情况下跟踪这一点。