jquery - 順序なしリストのJqueryクリックイベント

Question

順序付けされていない 2 つのリストがあります。1 つは製品のリストで、もう 1 つはカテゴリをフィルター処理するためのカテゴリのリストです。

以下のコードでは、商品リスト アイテムの「open」クラスを切り替える最初の関数は機能しますが、2 番目の関数は機能しません。

$(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 呼び出しが機能する方法について何か不足していますか?