jquery - 需要在单个选择器中执行多个操作

Question

案子 ：

我有一个列表项，可以为选定的一项操作 css 以应用“选定效果”。例如，一旦单击任何指定的 li，它就会运行以下代码：

    $(document).on( 'click', 'li', function (){      
    $('li').removeClass('selected');
      $(this).addClass('selected');
});

但是在 li 上，它需要执行其他操作，因为我在 li 中有另一个链接：

<li class="selected"><a href="#"><span class="items">Item 1</span></a><a href="#"><span class="edit">edit</span></a></li>

我的问题 ：

当我点击其他链接（例如上面的“编辑”）时，如何避免调用点击函数？因为我的本意不是选李..

我想到了在点击功能中，我可以在没有点击编辑链接时放置一个“if表达式”，然后继续..

但我寻找是否有更好的方法..

Answer 1

您可以尝试为 li 中的两个锚链接创建两个单独的处理程序。

例如：

$(document).on( 'click', '.items', function (e) {
     //Items handler
     $(this).addClass('selected');
});

$(document).on( 'click', '.edit', function (e) { 
     //edit handler
     $(this).addClass('selected');
});

Answer 2

当我点击其他链接（例如上面的“编辑”）时，如何避免调用点击函数？

在“编辑”链接的处理程序中，使用event.stopPropagation()它来防止它冒泡到li.

由于您使用的是委托，您可以这样做：Live Example | 直播源

$(document).on('click', '.edit', function(event) {
    $("<p>Do the edit...</p>").appendTo(document.body);
    event.stopPropagation();             // <=== The important bit
}).on('click', 'li', function (){
    $('li').removeClass('selected');
    $(this).addClass('selected');
    return false;
});

（我还添加return false了第二个，因为lis 中的链接导致页面跳转。）

Answer 3

用事件目标包装处理程序：

$(document).on( 'click', 'li', function (e) { 
    $elem = $(e.target);
    if ($elem.hasClass('edit')) {
        // your handler for edit...
    } else {
        // check for other conditions or elements if you need...

        $('li').removeClass('selected');
        $(this).addClass('selected');
    }
});