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を適切にターゲットにしていません。

編集：

アップグレードできないため、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

正常に動作します。しかし、 use on()...live()は非推奨です。

実際の例

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

Answer 3

jQuery 1.7の時点で公式に廃止されているため、使用on()に切り替えました。live()

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

JS フィドルのデモ。