$（document）.on（'click'在chrome中不起作用

Question

这是我在js小提琴上尝试的简单代码：

<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

click事件适用于整个select元素，而不适用于各个选项。 此外，最好使用在选择后触发的change事件，而不是click事件，而click事件在click立即触发。

此外，您无需包装代码即可为OnReady做准备。 与此on的呼叫，你绑定事件的文件，这是已经上市，即使选择对象本身还没有到。

因此，您的代码可以像下面这样简化（并使工作）：

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

Answer 2

您可以尝试将onchange事件用于选择元素：

 $(function () { $(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 class="pid">1</option> <option class="pid">2</option> <option class="pid">3</option> <option class="pid">4</option> </select>