jquery - 无序列表上的 Jquery click 事件

Question

我有两个无序列表：一个是产品列表，第二个是用于筛选类别的类别列表。

在下面的代码中，第一个在产品列表项上切换“打开”类的函数有效，但第二个无效。

$(document).ready(function () {
  $('#products').on('click', 'li', function () {
    $(this).toggleClass("open")
  });

  $('#filters').on('click', 'li', function () {
    //set or reset category array
    var catarray = [];
    //set categories
    $(this).toggleClass("clicked");
    $("#products li").hide();
    //if no categories, show all 
    if ($(".clicked").length == 0) {
      $("#products li").fadeIn("slow")
      return;
    }
    $("#products li").fadeOut("slow")
    //collate categories
    $(".clicked").each(function () {
      var category = $(this).attr("id");
      catarray.push(category)
    });
    var catarray = catarray.join('.')
    var catarray = "." + catarray
    //filter based on categories
    $("#products li").filter(catarray).fadeIn("slow");
  });
});

我是否错过了有关 Jquery .on 调用工作方式的一些信息？