How to single out a checkbox click event within an inside container?
I have an overview list, with 开发者_Go百科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=)
$(".chkMessage").click(function (evt) {
evt.stopPropagation();
...
}
jQuery event.stopPropagation()
精彩评论