jquery - 检查特定类的按钮单击

Question

$("div#buttonContainer ul li").live("click",function(){    
    if($(this).hasClass('selected')){
        alert('selected');
    }    
});

<div id="buttonContainer">
    <ul>
        <li class="selected"></li>
        <li></li>
        <li></li>
    </ul>    
</div>

我有适用于所有 li 标签的点击处理程序，但我希望在 li 具有所选类时执行特定函数。上面的 javascript 会在任何 li 点击时弹出警报。我不确定我做错了什么，也许我没有正确定位特定的 li 。

编辑：

我必须使用 jquery 1.3 技术，因为我无法升级。

Answer 1

正如其他发帖者所回应的那样，这个简单的案例正在 jsFiddle 中工作，我将假设在您的实际应用程序中某些东西已经改变了 this 上下文。所以这个解决方案将从图片中删除它并使用实时点击的目标，所以它仍然可以在 jQuery 1.3 中工作

$("#buttonContainer ul li").live("click",function(e){
  if($(e.target).hasClass('selected')){
    console.log('selected');
  }
  console.log('any li');
});

Answer 2

工作正常。但是使用on()...live()已被弃用。

现场示例

$(function() {
    $("div#buttonContainer ul").on("click", "li", function() {
        if ($(this).hasClass('selected')) {
            alert('selected');
        }
    });
});​

Answer 3

我已经切换到 using on()，live()从 jQuery 1.7 开始正式弃用，它说：

$("#buttonContainer ul li").on("click", function(e) {
    var target = $(e.target);
    if (target.hasClass('selected')) {
        alert('selected');
    }
});​

JS 小提琴演示。