테이블 행의 자식 요소에서 jquery 클릭 이벤트 핸들러 제거

Question

첫 번째 열에 확인란이있는 표가 있습니다. 행의 아무 곳이나 클릭하면 'row_selected'클래스가 테이블 행에 설정되고 확인란이 선택됩니다. 코드는 다음과 같습니다 :

$('#my_table > tbody > tr > td').live('click', function() { 
    if ($(this).parent().hasClass('row_selected')) { 
     $(this).parent().removeClass('row_selected') 
     $('td.checkbox input', this.parentNode).prop("checked", false) 
    } else { 
     $(this).parent().addClass('row_selected') 
     $('td.checkbox input', this.parentNode).prop("checked", true) 
    } 
}) 

문제는 일부 표 셀에 클릭이있는 경우 행 선택을 원하지 않는 것입니다. 즉

<tr> 
    <td class="checkbox"> 
     <input type="checkbox" checked="false"/> 
    </td> 
    <td>blah<td> 
    <td> 
     <a class="myButton">do stuff</a> 
    </td> 
    <td>blah<td> 
</tr> 

myButton을 클릭 할 때를 제외하고 jquery 클릭 이벤트가 작동되기를 원합니다.

아무도 아이디어가 없습니까?

Answer 1

myButton 클래스 요소에서 전달을 중지 할 수 없었습니까?

$('a.myButton').click(function(e) { 
    e.stopPropagation(); 
});​ 

다음은 TD 클릭이 링크를 클릭하는 경우를 제외하고 작업을 트리거하는 방법을 보여줍니다 단순화 jsFiddle example 사용하여 코드입니다.

Answer 2

$('#my_table > tbody > tr > td').live('click', function() { 
    if ($(this).children('a.myButton').length) return true; // prevents click on link 
    if ($(this).parent().hasClass('row_selected')) { 
     $(this).parent().removeClass('row_selected') 
     $('td.checkbox input', this.parentNode).prop("checked", false) 
    } else { 
     $(this).parent().addClass('row_selected') 
     $('td.checkbox input', this.parentNode).prop("checked", true) 
    } 
}) 

td에서 링크를 찾으려고 시도하고 발견되면 링크가 계속 작동하기 위해 true를 반환합니다. (링크가 "클릭"액션을 수행하는 것을 원하지 않으면 false를 반환)

jsFiddle에 간단한 예제가 생성되었습니다.

당신이 .live.on에

$('a.myButton').click(function(e) { 
    e.stopPropagation(); 
});​ 

$('#my_table > tbody > tr > td').on('click', function() { 
    if ($(this).parent().hasClass('row_selected')) { 
     $(this).parent().removeClass('row_selected') 
     $('td.checkbox input', this.parentNode).prop("checked", false) 
    } else { 
     $(this).parent().addClass('row_selected') 
     $('td.checkbox input', this.parentNode).prop("checked", true) 
    } 
}) 

Here을 변경 한 경우에는 다른 예제를 볼 수 .stopPropagation를 사용할 수 있지만 어디 .live를 사용하지 않고 .stopPropagation 작품. jQuery1.7에서만 작동합니다 +

Answer 3

나는 이벤트 소스를 메서드의 시작 부분에서 가져 와서 내가 기대했던 것이 아닌 경우 반환합니다. 예 :

function getEventSrc(e) 
{ 
    var eventIsFiredFromElement = e.target; 
    if(eventIsFiredFromElement==null) 
    { 
     // I.E. 
     eventIsFiredFromElement = e.srcElement; 
    } 
    return(eventIsFiredFromElement.type); 
} 

클릭 한 요소 유형을 반환합니다. 단추 인 경우 중지하고 싶은 것 같습니다.

$('#my_table > tbody > tr > td').live('click', function(ev) { 
    // Make sure event is not comming from a button. 
    if(getEventSrc(ev) == 'button'){return;} 

    if ($(this).children('a.myButton').length) return true; // prevents click on link 
    if ($(this).parent().hasClass('row_selected')) { 
     $(this).parent().removeClass('row_selected') 
     $('td.checkbox input', this.parentNode).prop("checked", false) 
    } else { 
     $(this).parent().addClass('row_selected') 
     $('td.checkbox input', this.parentNode).prop("checked", true) 
    } 
})