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 요소를 클릭 것을 등록하는 것입니다. 아마도 코드 블록 두 개를 주문한 순서와 관련이 있다고 생각했지만 아무런 차이가 없었습니다. 이미지의 클릭이 요소가 아닌 tr 요소에 대한 클릭을 등록하는 이유를 알 수 없습니다.

Answer 1

이것은 이벤트가 DOM 트리 위로 전파되어 다른 이벤트를 트리거하기 때문에 발생합니다. 전파를 중지하고 코드가 작동합니다 :

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

    e.stopPropagation(); 
}); 

Answer 2

편집 : .live 그래서 아마 사용 귀하의 질문에 내 대답은 블렌더로 관련이없는 반면 내 대답은 .click의 JQuery와 함수를 사용했다.

---

img 태그가 tr 태그 안에 있기 때문에 부모 tr의 click 기능으로 넘어갑니다.

내가 사용한 적이있는 유일한 방법은 false를 반환하는 것입니다. 필요한 모든 자바 스크립트가 완료된 후 예를 들어

:

<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> 

은 아마도 그 그러나이 주위에 더 나은 방법이 내가 일반적으로하지 않습니다 어쨌든 잘못된 값의 진실을 반환하는 이벤트를 클릭해야하기 때문에 나는 그것을 할 방법이다.