javascript - $(document).on ('click' 在 Chrome 中不起作用

Question

这是我在 js fiddle 上尝试的简单代码:

<select id="test">
  <option value="">select</option>
  <option class="pid">1</option>
  <option class="pid">2</option>
  <option class="pid">3</option>
  <option class="pid">4</option>
</select>

$(function () {
    $(document).on('click', '.pid', function () {
       alert('here');
    });
});

点击http://jsfiddle.net/QRVSw/16/

Answer 1

点击事件适用于整个 select 元素，而不是单个选项。此外，最好使用 change 事件，该事件在做出选择后触发，而 click 事件则在您单击后立即触发。

此外，您不需要包装代码来为 OnReady 做好准备。通过此 on 调用，您可以将事件绑定(bind)到已经可用的文档，即使选择对象本身尚不可用。

因此，您的代码可以像这样简化(并使其工作):

$(document).on('change', '#test', function () {
   alert('here');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="test">
  <option value="">select</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>