jQuery点击<li>干扰

Question

好的，这个问题很难解释，但我会尽力而为。

当我点击一个<li>元素时，他里面的其他所有人都会被点击。

我尝试创建类别和子类别。但是，每当我单击一个类别时，也会调用一个子类别！

<li class="has-sub product_type" id="category1"> <a>Lorem1</a>
    <ul>
        <li class="product_sub_type" id="subcategory1"><a>Lorem2</a></li>
        <li class="product_sub_type" id="subcategory2"><a>Lorem2</a></li>
        <li class="product_sub_type" id="subcategory3"><a>Lorem2</a></li>
        <li class="product_sub_type" id="subcategory4"><a>Lorem2</a></li>
    </ul>
</li>

$(document).ready(function(){
    var type_id = '';
    $(".all_products").fadeOut("fast");

    $(".product_type").on("click", function(event) {
        alert("Dbg");
        type_id = event.currentTarget.id;
        $(".big_categoryes").fadeOut("fast");
        $(".all_products").fadeIn("smooth");

        sortProducts(type_id);
    });

    var type_sub_id = '';
    $(".product_sub_type").on("click", function(event) {
        type_sub_id = event.currentTarget.id;
        sortSubProducts(type_sub_id);
    });
});