为什么我的带有hasClass的if/else条件只激发第一个条件

Question

我的if/else的else条件没有激发。条件是li.catparent，因此如果单击它，我可以激发某些代码。如果单击了不带"li.catpaparent"的其他项目之一，则将激发不同的代码。也许有人能告诉我我缺了什么？我的if/else语句非常简单，我不确定它为什么不被激发。我肯定错过了什么。

HTML:

    <ul class="portal-filter categorylist" id="filter">
        <li class="all"><a class="selected" href="#" data-filter="*">All</a></li>
        <li class="category"><a href="#" data-filter=".category1">Category 1</a></li>
        <li class="category"><a href="#" data-filter=".category2">Category 2</a></li>
        <li class="catparent">
            <span class="catparenttxt">
                Category Parent
                <span class="subnavarrow"></span>
            </span>
            <ul class="subcatlist">
                <li class="category"><a href="#" data-filter=".subcategory1">Subcategory 1</a></li>
                <li class="category"><a href="#" data-filter=".subcategory1">Subcategory 2</a></li>
                <li class="category"><a href="#" data-filter=".subcategory1">Subcategory 3</a></li>
            </ul>
        </li>
        <li class="category"><a href="#" data-filter=".category1, .category2">Category 1 and 2</a></li>
    </ul>

jQuery

    $('ul.categorylist > li').on('click', function(){
        if($(this).hasClass('catparent')){
            console.log('category parent clicked');
        }
        else{
            console.log('category without parent clicked');
        }
    });

或

    $('ul.categorylist > li').on('click', function(){
        if($(this).hasClass('catparent')){
            console.log('category parent clicked');
        }
        else if(!$(this).hasClass('catparent')){
            console.log('category without parent clicked');
        }
    });

这里有一个Fiddle，它似乎正在处理简单的代码。

这是对我的整个项目代码的篡改，表明它不起作用。

Answer 1

此问题似乎与您使用的媒体盒插件有关。如果您从您提供的损坏的JSFiddle中取出$('#grid').mediaBoxes({ ... });部分，它将完全按预期工作。您可以在更新后的JSFiddle中看到此修复程序。

为了解决这个问题，您还需要处理列表项中a标签的点击：

$('ul.categorylist > li, ul.categorylist > li a').on('click', function() {
    ....
});

Answer 2

原因是点击事件实际上只针对li.catparent触发；这是由于其他lis中的锚点元素消耗了鼠标点击。

您也可以在其中添加一个处理程序来接收事件：

$('ul.categorylist li a').on('click', function(e) {
 alert('a inside li clicked');
}