はjqueryのは、奇妙な行動

Question

次のHTMLを考える

をクリックされていなかった要素をクリック登録：

<table> 
    <tr> 
     <td> 
      <img rel="20110914103319-9589184176" src="images/redXblackBackground.png" style="float: left;"> 
     </td> 
    </tr> 
</table> 

を、私は、行をクリックした場合でも、登録するために、次のコードを持っています。

$('tr').live('click',function(e){ 
    var tagType = $(this).get(0).tagName; 
    console.log(tagType); 
}); 

画像がクリックされたときには次のコードを使用します。

$("td img").live('click',function(e){ 
    opId = $(this).attr('rel'); 
    console.log(opId); 
}); 

問題は、私は、画像をクリックすると、それは私がtr要素をクリックすることを登録することです。おそらく、コードの2つのクリックブロックが注文された順序と関係がありますが、違いはありませんでした。イメージのクリックが要素ではなくtr要素のクリックを登録する理由を確認できません。

Answer 1

これは、イベントがDOMツリーを伝播し、他のイベントをトリガするために発生します。伝播するからそれを停止し、あなたのコードは動作するはずです：

$("td img").live('click',function(e){ 
    opId = $(this).attr('rel'); 
    console.log(opId); 

    e.stopPropagation(); 
}); 

Answer 2

編集：あなたの質問はので、多分、私の答えはBlenderのほどは関係ありません.live使用に対しが 私の答えは.clickのjqueryの機能を使用していました。

---

imgタグはtrタグの内側にあるため、親trのclick機能に落ちています。

これまで私が使ってきた唯一の方法はfalseを返すことです。あなたの必要なjavascriptのすべてが完了した後。例えば

：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('tr').click(function() { 
      alert('tr'); 
     }); 

     $('tr span').click(function() { 
      alert('span'); 
      return false; 
     }); 
    }); 
</script> 
<table width="100%"> 
    <tr style="background: #ccc;"> 
     <td> 
      <span id="test">Test</span> 
     </td> 
    </tr> 
</table> 

はおそらく、この周りに、より良い方法があるが、私は通常、とにかく偽の値の真を返すために、イベントをクリックして必要がないので、それは私がそれを行う方法です。