无序列表上的Jquery clilck事件

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

在下面的代码中，第一个函数可以在产品列表项上切换“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调用的工作方式？

能否添加列表示例？我建议在on（）语句的开头插入一个警报，看看它是否发出警报。如果是这样的话，请将其向下移动一步，我认为可能在连接分隔符中缺少了一个空格，比如

var-catarray=catarray.join（'.'）由于现在您正在筛选指定了所有类的产品，而不是指定了任何一个类的产品，所以我采纳了Dylan的建议，检查了我的HTML。都分类好了。谢谢你的时间