jquery - jQuery内部要素でのみイベントを実行する方法

Question

listitem の内側の要素だけに何かをさせる方法はありますか？

a特定のクラスのタグを含めることができるリスト要素があります。

内部aタグは、ライブクリックイベントハンドラーにバインドされます。リストアイテム自体にもクリックイベントハンドラーがあります。

このようなもの

<li>some text<a class="someClassName">some text</a></li>

aタグのハンドラーを使用

$('#somelist li a').live("click", function(e)

これがliアイテムのイベントが追加される方法です

$(markers).each(function(i,marker){
    $("<li />") 
    .html("Locatie "+'<a class="ol id"><strong>'+ids[i]+'</strong></a>') 
    .click(function(e){
          showLocation(marker, i);
    })
    .appendTo("#somelist ");

Answer 1

jQueryのliveメソッドは、イベントの委任を介して機能します。これは、バブルされたすべてのイベントを個々の要素から共通の祖先（この場合はそのdocument）にキャッチする行為です。

クリックイベントの伝播/バブリングの停止は、ハンドラー要素（要素自体ではなく、共通の祖先）で発生し、li回避しようとしている要素よりもはるかに上に存在します。

したがって、stopPropagationメソッドが呼び出されるまでに、すでにdomをトラバースして、li要素を渡しました。

それは本質的に交差点の200フィート後に一時停止の標識を置いています。

したがって、別の解決策を使用するか、見つける必要がありbindますstopPropagation。

これが私が話していることの例です：http：//jsbin.com/ibuxo（コンソールをチェックしてください）

コードを表示するか、http：//jsbin.com/ibuxo/editで編集できます。

この問題に対する私の提案された解決策は、bindの代わりにを使用することですlive。

これには少し余分な作業が必要ですが、それほど悪くはありません。

live新しい要素を追加していて、それらに同じ機能を持たせたいために、おそらく使用しています。ページに入力するときにバインドしてこれを行う必要があります。これが例です

$(function(){
  var myAnchorHandler = function(e){
    alert('clicked!');
    e.stopPropagation();
    return false;
  };

  // initial bind
  $('#somelist li a').click(myAnchorHandler);

  // code where you input more li elements to the list with links
  $('#somelist').append(
    // bind your function to the element now, and then append it
    $('<li><a>hi</a></li>').find('a').click(myAnchorHandler).parent()
  );
});

Answer 2

著者からの解決策：

上記のようにすべてのタグを追加したので、ライブとの混同はもうありません。

$(markers).each(function(i,marker){
    listitem = $("<li />") 
    .html("Location ") 
    .click(function(e){
        showLocation(marker, i);
    })
    .appendTo("#somelist");
    $("<a />")
    .html("<strong>"+ids[i]+"</strong>")
    .addClass('ol id')
    .click(function(){
        $('#ginfo').show();
        return false;
    })
    .appendTo(listitem);

イベントバブリングを説明する興味深いページは次のとおりです。jqueryライブでイベントバブリングを停止する方法は？

Answer 3

タグのハンドラーが<a>falseを返すようにします。