disabling onclick functionality parent/child container in jquery

Question

I want to overrule the onclick on a parent div, when an image-link in a child container is clicked.

I am using an onlick on a container called ".sight-title" to: - change the class with toggleClass("active"); - change the content with an ajax call

initial state:

<div class="sight-title" id="S2851">
  <div class="row1"></div>
  <div class="row2"></div>
</div>

after clicking:

    <div class="sight-title active" id="S2851"> 
  <div class="detail1">
    <a class="wikilink" target="_blank" title="en.wikipedia.org/wiki/Marollen" href="http://en.wikipedia.org/wiki/Marollen"><img src="img/contact/culisite_wikipedia.png" border="0"></a>
  </div>
  <div class="detail2"></div>
</div>

when de the parent ".sight-title" is clicked again it changes back to the initial state.

But when the class="wikilinks" is clicked i don't want the onclick on the parent container to work.

jquery code: the else-part should be disabled when the class="wikilinks" is clicked...

$(".sight-title").click(function () {
                var id=$(this).attr("id");                                      
                $("#"+id).toggleClass("active");                    
                if($(this).hasClass("active")){
                    $("#"+id).html(ajax_load);  
                    $.get(  
                     loadUrlDetail+"?id="+id+'&arrondissement='+arrondissement,  
                     {language: "php", version: 5},  
                     function(responseText){  
                         $("#"+id).html(responseText);  
                     },  
                     "html"  
                    );   
                } else {
                    $("#"+id).html(ajax_load);  
                    $.get(  
                     loadUrlTitle+"?id="+id+'&arrondissement='+arrondissement,  
                     {language: "php", version: 5},  
                     function(responseText){  
                         $("#"+id).html(responseText);  
                     },  
                     "html"  
                    );  
                }
            });

Answer 1

Use jQuery's unbind: http://api.jquery.com/unbind/

$('a.wikilink').click(function() {
    //do stuff
    $('a.sight-title').unbind('click');
});

EDIT 2:

You may need to use live instead if the link doesn't exist when you create its click event.

$('a.wikilink').live('click', function() {
    //do stuff
    $('a.sight-title').unbind('click');
});

EDIT:

As a side note, you might want to make use of jQuery's load function rather than your GETs and such.

I think you'll find it makes your life easier.

You should also look at your selectors. You're selecting the very same object you're on with $("#"+id) instead of just doing $(this) .