Jquery在无序列表上单击事件

Question

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

在下面的代码中，第一个在产品列表项上切换'open'类的函数有效，但第二个函数没有。

$(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调用工作的方式吗？