click event of parent triggered

Question

Problem is solved, i made another stupid mistake in my code... sorry, thanks

example:

<div id="window1Header" class="windowHeader">
   Window 1 <a id="min1" class="minimize">[-]</a> <a id="max1" class="maximize">[+]</a>
</div>
<script>
    $(function() {

    $(".windowHeader").mousedown(function () { 
  $(this).parent().css({"border" : "#000 1px dashed"});
  $(this).parent().draggable({ containment: 'parent' });
 });
$(".windowHeader").mouseup(function () { 
  $(this).parent().css({"border" : "#ccc 1px solid"});
  setTimeout(function() {
   $(this).parent().draggable('destroy');
   }, 100);
 });

   $('#min1').click(function(e) {
     e.stopPropagation();
        $("#window1Body").hide().slideUp(500);
});
$('#max1').click(function(e) {
 e.stopPropagation();
        $("#window1Body").hide().slideDown(500);
});

    });
</script>

The outerdiv (window1Header) has a mousedown and up event and the 2 links (min1 and max1) have click-events. But clicking the links wil trigger the event binded to window1Header. How can i trigger the right events? I'm using the jquery library btw.

Any help is appreciated!

Answer 1

Generally, use stopPropagation to prevent the event from bubbling to parent elements. E.g.:

$('.minimize').click(function(e) {
    e.stopPropagation();
    ...
});

Answer 2

You need to at least have an href="#" on your a tags otherwise the click event will never fire. Also, return false in the click events.

 $('#max1').click(function(e) {
    $("#window1Body").hide().slideDown(500);
    return false;
 });