Question

I have an overview list, with divs, and also each div has a pair, which contains all the details. If you click on the “intro” div then the detailed pair is open and the intro is got hidden. Eeach div has a checkbox. And I bumped into a problem, if I click the “intro” div’s checkbox the detailed div will be open, because the click event also happen on the intro div as well. I came up with a solution like, using a external span, where I store all the opened div ids.

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

for this i have a js like this

$(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"));
        }
    });
 });

});

Its makes the js a bit complicated, and I assume there must be a more easy way to single out a checkbox click event. It shouldnt matter if a checkbox is checked or unchecked, but it should just filter out the click event.

If anybody has a simple solution for this matter, it would be appreciated a lot=)

Answer 1

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

jQuery event.stopPropagation()