Prevent event bubbling with jquery

[cs.punk]

			$('input[type=checkbox]').change(function(event) {

				var c = this.checked ? '#CCCCCC' : '#ECECEC';
    				$(this).parent().parent().css('color', c);
				event.stopPropagation();
			});


			$('table tr').click(function() {

				alert('test');

			});

 

Can anybody tell me why the click event of the table row gets fired, when the checked state of the check box changes?

[Adam]

They're two separate events. When they're fired they make their way up the DOM tree individually. If you changed the checkbox to a 'click' event, it would work. Of course though that wouldn't work if you changed the value of it using the keyboard. I would just detect the origin element in the event object, and conditionally run the 'click' event's code if it's not the input.