如何挑選內部容器中的複選框單擊事件？

Question

我有一個概述列表，divs，並且每個div都有一對，它包含所有的細節。如果你點擊「intro」div，那麼詳細的對將被打開，並且介紹被隱藏。 Eeach div有一個複選框。我碰到一個問題，如果我點擊「intro」div的複選框，詳細的div將會打開，因爲點擊事件也會發生在intro div上。我想出了一個解決方案，使用外部跨度，我存儲所有打開的div ID。

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

爲了這個，我有一個js這樣

$(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有點複雜，我認爲必須有挑出一個複選框，單擊事件更簡單的方法。如果複選框被選中或未選中，它應該很重要，但它應該只是過濾出單擊事件。

如果有人對這個問題的簡單解決方案，我們將不勝感激了很多=）

Answer 1

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

jQuery event.stopPropagation()