绑定所有孩子的点击事件

Question

我正在尝试为像这样的元素的子元素绑定点击事件：

$('#A').children().bind('click',function () {
    console.log('Hello');
});

HTML

<select id='A'>
    <option val='1'>One</option>
    <option val='2'>Two</option>
</select>

我已经检查了stackoverflow中的其他问题，例如Bind element and its children in jQuery，并且到处都提到了相同的方法。这里有什么问题吗？

修改

我知道有一个可用的更改事件，但是，请考虑当我选择所选的相同选项时需要触发更改事件的场景。

更改仅在选项从One更改为Two时有效，反之亦然，但如果我选择相同的选项，即：从Two更改为Two该怎么办？本身？

Answer 1

其他回复建议解决问题。您的代码可能无法在严格的浏览器中运行的原因是选项元素的click event is not defined。您可以使用更改事件，或者如果您确实需要处理click，则不应使用本机select元素。

Answer 2

您可能需要change()个事件而不是click，并且不需要与option绑定。只要通过点击选项更改选项选项，就会触发该事件。

<强> Live Demo

$('#A').bind('change',function () {
    console.log('Hello');
});

Answer 3

您可以在select元素中使用 .change() 事件，因为更改.change()时会触发option事件：

$('#A').on('change',function () {
    console.log('Hello');
}).change();

Answer 4

这是你想要的行为吗？的 http://jsfiddle.net/P97ML/

$('#A').bind('change',function () {
    console.log('Hello');
});

Answer 5

将on()与select的更改事件一起使用。

这样做：

$('#A').on('change',function () {
    console.log($(this).val()); // log selected option value
});

Answer 6

您正确地执行此操作（适用于大多数情况）但options内的select不是这种情况

您需要使用更改事件，如果您想引用所选选项，可以使用 :selected

$('#A').bind('change',function () {
    console.log('Hello');
    var $selectedOption = $("option:selected",this);
});

Answer 7

鼠标事件不会在各个选项上触发，它们会在整个选择菜单上触发。所以：

$('#A').click(function() {
    alert('Hello');
});

DEMO