Anchor tag event not firing

Question

My problem is that my anchor onclick event is not firing. Here is my jquery code

This is a pageLoad Event

function pageLoad() {

I am Binding the context menu Event on an anchor

$('#ctl00_ContentPlaceHolder1_gvParamShow a').bind("contextmenu", function(e) {
    // alert('event fired');
    e = jQuery.event.fix(e);

    $('#contextMenu').parent().css('position', 'absolute');
    $('#contextMenu').css('borderColor', 'Black').css('borderStyle', 'Solid').css('borderWidth', '1px').css('backgroundColor', '#EEEEEE').css('color', 'Black');
    $('#contextMenu').show();
    //alert('appended');
    var mouseX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
    var mouseY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;

    document.getElementById('contextMenu').style.top = mouseY + 'px';
    document.getElementById('contextMenu').style.left = mouseX + 'px';
    return false;
});

This is the problem area, Read the explanation at the end of the code

$('*').not($('.anchorClass')).mousedown(function() {
    if ($(this).is('a')) {
    }
    else {
        $('#contextMenu').hide();
    }

});
}

The event to be fired on anchor click

function showLiveTrack() {
    alert('hey');
    return false;
}

Here is my context menu code

<div id="contextMenu">           
            <div><a onclick="showLiveTrack();" class="anchorClass">Show Live Track</a></div>
            <div><a class="anchorClass">Bhuwan</a> </div>
            <div><a class="anchorClass">Bhuwan</a> </div>
            <div><a class="anchorClass">Bhuwan</a> </div>          
</div>

Explanation of My Question:

I want to fire showLiveTrack() function on context menu anchor click. Also, I want to make the context menu disappear when user clicks anywhere else on the screen. I've tried every possible way that I had in my mind but I am not able to fire the event of this anchor. Instead it makes the context menu disppear. Why?

If I remove the below code

$('*').not($('.anchorClass')).mousedown(function() {
    if ($(this).is('a')) {
    }
    else {
        $('#contextMenu').hide();
    }

});

Then the event gets fired..

What Am i doing wrong???

Answer 1

I made this jsfiddle to try to fix your problem: http://jsfiddle.net/fFs4j/1/

See that I attached separate click listeners for the body and the #contextMenu . As you see, I check if the #contextMenu was clicked on in the $('body').click listener by checking the target.

Is that what you were looking for?