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

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

  

点击其他链接时如何避免调用点击功能（例如上面的'编辑'）？

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

由于你正在使用委托，你可以这样做：Live Example | Live Source

$(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添加到第二个，因为li中的链接导致页面跳转。）

Answer 2

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

例如：

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

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

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');
    }
});