jQuery代码在Firefox上有效，但在Chrome和Opera中不可用

Question

I wonder this code does not trigger in Chrome. It works as expected in FireFox.

 $("#filter-price :checkbox").on("click", function() { $("#product-results").empty(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ol class="items" id="filter-price"> <li class="item "> <label> <input type="checkbox" value="0-20"><span>$0 - $20 <span class="count"></span> </span> </label> </li> <li class="item "> <label> <input type="checkbox" value="20-50"><span>$20 - $50 <span class="count"></span> </span> </label> </li> </ol> 

Answer 1

Your JavaScript is executed before the html elements input:checkbox are available in Chrome/Opera.

Wrap your JavaScript into a document.ready :

$(function() {
    console.log('Register click event on:', $("#filter-price :checkbox"));
    $("#filter-price :checkbox").on("click", function() {
      console.log('Click event recognized', {checkbox: $(this) elToEmpty: $("#product-results")});
      $("#product-results").empty();
    });
});