0

Jquery's .not() and :not doesn't seem to work in this particular scenario. Any corrections or alternatives would be REALLY appreciated!

As you see from the code below, when you click on the green box, the purple box will either slide up or down.

How can I exclude the checkbox from the click area? ie, so that when you click the green box an animation occurs, but not when you click the checkbox..?

<html>
<head>
	<style type="text/css">
	#box {
		width:100px;
		height:100px;
		background-color:green;
	}
	
	#slider {
		width:100px;
		height:100px;
		background-color:purple;
		display:none;
	}
	</style>
	
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
	
	<script type="text/javascript">
	$(document).ready(function(){
		$('#box').not(':checkbox').click(function(){
		if ($(this).next('#slider').is(":hidden")) {
			$(this).next('#slider').slideDown('normal');
		} else {
			$(this).next('#slider').slideUp('normal');
		}
		});
	});
	</script>

</head>

<body>
	
	<div id="box">
		<input type="checkbox" />
	</div>
	<div id="slider">
	</div>

</body>
</html>
2
Contributors
3
Replies
4
Views
6 Years
Discussion Span
Last Post by rom.
0

Rom,

That's caused by event propagation. In other words, the click is firing a click event in the div underlying the checkbox.

This can't be cured with either not()or :not because it isn't a question of jQuery selection.

Instead, you have to specifically inhibit the click from propagating downwards, like this:

$(document).ready(function(){
	$('#box').click(function(){
		var $s = $(this).next('#slider');
		if ($s.is(":hidden")) { $s.slideDown('normal'); }
		else { $s.slideUp('normal'); }
	});
	$('#box input[type=checkbox]').click(function(evt){
		evt.stopPropagation();
	});
});

Airshow

0

thanks Airshow!
SOLVED

Heres a lighter version using slidetoggle if anyone ever needs it...

$(document).ready(function(){
        $('#box').bind('click', function(){
            $('#slider').slideToggle();
        });
        $('#box :checkbox').click(function(e) {
            e.stopPropagation();
        });
    });
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.