javascript - 使用 YUI3 确定单选按钮选择何时更改

Question

我正在使用 YUI3 以及 Internet Explorer 8 和 Firefox。我正在尝试确定单选按钮何时更改了选择。

我的 HTML:

<div id="test">
     <input name="test1" value="a" type="radio">
     <input name="test1" value="b" type="radio">
     <input name="test1" value="c" type="radio">
</div>

我的 JavaScript:

YUI().use('event', 'node', function (Y) {
     Y.one('input[name=test1]').on('change', function (e) {
          alert('changed');
     });
});

这不起作用，因为页面加载没有在单选按钮组中选择任何内容。当我选择第一项时，没有任何反应，也没有弹出警报。当我单击第二个按钮时，它会弹出。如何确定单选按钮选择何时更改？

另外，我如何获取所选单选按钮的值，我认为存在 IE 问题？这炸弹:

var value = Y.one('input[name=test1]:checked').get('value');
alert(value);

这什么也带不回来:

var value = Y.all('input[name=test1]:checked').get('value');
alert(value);

Answer 1

您可以使用事件委托(delegate)来监听“点击”事件。如果您不知道什么是事件委托(delegate)，请查看 this short intro . change 事件在旧版浏览器中存在问题，因此请坚持使用 click 事件。您需要做的就是使用 Y.one 获取父元素并设置委托(delegate)监听器:

YUI().use('node', function (Y) {
  Y.one('#test').delegate('click', function (e) {
    alert(e.target.get('value'));
  }, 'input[type=radio]');
});