td 내의 체크 박스를 무시하는 방법

Question

jQuery의 이벤트 위임을 사용하여 테이블 이벤트에 클릭 이벤트를 추가하고 있습니다. 또한 행의 첫 번째 td에 체크 박스가 있습니다. 행의 아무 곳이나 클릭하면 모든 것이 예상대로 작동합니다. 그러나 확인란을 클릭하면 이벤트가 작동하지 않습니다. : not() 셀렉터를 사용해 보았습니다. 그러나 체크 박스를 클릭했을 때 여전히 이벤트를 트리거하고 있기 때문에 아마도 뭔가 빠졌습니다.

HTML

<tr> 
    <td> 
     <div class="myCheckbox"><input type="checkbox" name="userName" /></div> 
    </td> 
    <td><a href="/go/to/user/profile"></a></td> 
    <td>more info</td> 
    <td>more info</td> 
    <td>more info</td> 
</tr> 

jQuery를

$('table tr:not(':checkbox')').on('click', 'td', function(event) { 

    // Do something 
}); 

내가하려고하는 것을 수정하는 데 도움을받을 수 있습니까?

Answer 1

두 가지 옵션 (기존의 당신이 체크 박스가 될 수 없습니다   — tr 요소가 작동하지 않습니다 말하는대로 코드 및 :not 검사 요소에서 tr:not 물건을 제거하는 것에 관련된 내용이 아닌 모두) :

1. e.stopPropagation을 호출하는 확인란에 이벤트 처리기를 추가하십시오. 그런 다음 클릭 이벤트가 행에 도달하지 않습니다. 직접 또는 위임을 통해이를 수행 할 수 있습니다. 직접가는 Here's a live example. 간접적 인 경우에는 지원하려는 모든 브라우저에서 확인란을 활성화하는 label을 클릭하여 테스트하십시오 (해당 브라우저를 사용하려는 경우).

   또는

2. 핸들러이 추가

   :

   if ($(event.target).is('input[type=checkbox]')) { 
       return; 
   } 
   

   예 :이 체크 박스입니다 있는지 확인하기 위해 이벤트의 소스를 테스트하여 작동

   $('table').on('click', 'td', function(event) { 
   
       if ($(event.target).is('input[type=checkbox]')) { 
        return; 
       } 
   
       // Logic here 
   }); 
   

   , 그리고 모르나요 이른. 두 경우 모두

, 당신은 체크 박스를 활성화하기 위해 label를 사용하는 경우, 당신은 라벨에 대해 같은 일을해야 할 수도 있습니다. | Live example :

나는 label의 처리를 어떻게 보이는지 # 2에 대한 호기심을 가지고, 그것은 충분히 함수로 이동 코드,하지만 난 가고 싶어하는 방법   & mdash 아마 어렵지 않다 밝혀 source

jQuery(function($) { 

    // The table cell click handler 
    $("table").on("click", "td", function(e) { 
    // Is the source a checkbox or the label for 
    // one? 
    if (isCheckbox($(e.target))) { 
     return; 
    } 

    // Normal handling 
    $(this).toggleClass("foo"); 
    }); 

    // Function to test whether the source is a 
    // checkbox, or the label of a checkbox 
    function isCheckbox($elm) { 
    var chkid; 

    if ($elm.is("input[type=checkbox]")) { 
     return true; 
    } 
    if ($elm.is("label")) { 
     chkid = $elm.attr("for"); 
     if (chkid) { 
     return $("#" + chkid).is("input[type=checkbox]"); 
     } 
     return !!$elm.find("input[type=checkbox]")[0]; 
    } 
    return false; 
    } 

}); 

Answer 2

이벤트가 버블 링되는 것을 방지하려면 stopPropagation()을 사용해보십시오.

$('div.myCheckbox input[type=checkbox]').bind('change', function(e) { 
    e.stopPropagation(); 

    //do stuff here 
}); 

[상위 이벤트 핸들러의 실행을 방지]의