jQuery .click() overwrites a tags

Question

I'm stumped at the moment. I have a click() function implemented on .title to toggle its sibling (table) whether to show or hide. That works fine. My problem is that I have another click function inside .title which is on the a tag. When I click the a tag I want to keep the table open but .title over writes that and closes it and messes everything up. At the moment I have an onClick() on the a tag (which still doesn't work), it was done with jQuery .click() but I just can't get it right.

<script>
function dateChange(boatInput, dateInput){

         $("table").first().children().remove();
         $("table").first().load("availability.asp?boatType="+ boatInput +"&date="+ dateInput +"");
}
$(document).ready(function() {
    $("table").first().load("availability.asp?boatType=PowerCatamaran&date=currentDate", function(response, status, xhr){
        if (status == "error") {
            var msg = "Sorry but there was an error: ";
            $("table").html(msg + xhr.status + " " + xhr.statusText);
        }
    });


    $(".title").click(function(){
      $(this).next().toggleClass("hide");
      var boatName = $(this).next().attr('id');
      if(!$(this).next().hasClass('hide')){
          if(boatName == "SailingCatamaran"){
              $(this).next().load("#");
          }
          else if(boatName == "PowerCatamaran"){
              $(this).next().load("#");
          }
          else{
              $(this).next().load("#");
          }
      }
      $(this).children().last().toggleClass("hide");
      $(this).find('.dateSelect').toggleClass("hide");

    });
}); 
</script>

<div class="title">
        <h2>Catamarans</h2>
        <div class="dateSelect">
            <div class="prev">
                <p>Prev</p>
                <a href="#">< month</a>
                <a href="#">< week</a>
                <a href="#">< day</a>
            </div>

            <div class="next">
                <p>Next</p>
                <a href="#" onClick="dateChange('PowerCatamaran', 'nextMonth')">month ></a>
                <a href="#">week ></a>
                <a href="#">day ></a>
            </div>
        </div>
        <div class="expand hide">
            Click to Expand
        </div>
     </div>

So far the code is static. I just need some actual functionality working before making it all dynamic. I apologize for terrible code in advance!

Answer 1

You need to prevent the propagation of the click eveht from the inside event by calling event.stopPropagation()

$('<tag-selector>').click(function(event){
    //do your stuff
    event.stopPropagation()
});

Answer 2

I'm a bit rusty on CSS and jQuery selectors, but I think once you tag an element with a class, it applies to all elements that are children as well.

So the a's, p's, etc. in the div tagged .title also inherit class .title.

If you don't want that, I would suggest being more specific with the jQuery selector used to choose which elements get a .click() handler.

Perhaps:

$(".title > table").click(function(){...})

From jQuery "Child Selector" this says to apply the handler to all table elements that have a parent element in class .title