내부 컨테이너 내의 체크 박스 클릭 이벤트를 어떻게 처리합니까?

Question

div가있는 개요 목록이 있고 각 div에는 모든 세부 정보가 포함 된 쌍이 있습니다. "소개"div를 클릭하면 세부 쌍이 열려 인트로가 숨겨집니다. 각 div에 체크 박스가 있습니다. 그리고 문제가 발생했습니다. "intro"div의 체크 박스를 클릭하면 자세한 div가 열립니다. 왜냐하면 click 이벤트도 intro div에서도 발생하기 때문입니다. 외부 스팬을 사용하여 열린 div div를 모두 저장하는 것과 같은 솔루션을 생각해 냈습니다. 이것에 대한

<div class="divIntroHolder" id="divIntroHolder15"> 
      <span class="spanChkHolder"><input type="checkbox" name="Nr" value="15" class="chkMessage" id="chkMessage15"/></span> 

     </div> 

     <div class="divDetailHolder" id="divDetailHolder15"> 
      <div class="divPicContainer"> 
       <span class="spanChkHolder"><input type="checkbox" name="Nr" value="15" class="chkMessage"/></span> 
      </div> 
     </div> 

나는이

$(document).ready(function() { 
$(".divIntroHolder").click(function() { 
    var id = getId($(this).attr("id")); 
    if (!isOpen("spanOpenDivs", id)) { //check if the div is open or not 
     addTo("spanOpenDivs", id); // add to span 
     $(this).hide(); 
     $("#divDetailHolder" + id).show(); 
    } else { 
     removeFrom("spanOpenDivs", id); //remove from the span 
    } 
}); 

$(".chkMessage").click(function() { 
    var id = $(this).val(); 
    //prevent opening the detailed div 
    if (!isOpen("spanOpenDivs", id)) 
     addTo("spanOpenDivs", id); 

    var clicked = $(this); 
    $(".chkMessage").each(function() { 
     if ($(this).val() == id) { 
      $(this).attr("checked", clicked.attr("checked")); 
     } 
    }); 
}); 

}); 

그 같은 JS를 JS 조금 복잡하게, 그리고 나는 확인란을 클릭 이벤트를 골라 할 수있는 더 쉬운 방법이 있어야합니다 가정합니다. 확인란이 선택되어 있는지 또는 선택 취소되어 있는지는 중요하지 않지만 클릭 이벤트 만 필터링해야합니다. 사람이 문제에 대한 간단한 해결책이 있으면

그것이) = 많이 이해 될 것이다

Answer 1

$(".chkMessage").click(function (evt) { 
    evt.stopPropagation(); 
    ... 
} 

jQuery event.stopPropagation()