show Div relative to link click jQuery

Question

I know there are other questions about this out on the forums but I can't seem to get this to work for me so I thought i'd just start my own. I want to show a div below wherever the user might click the link on my page. The HTML is like this;

<div class="DetailHeaderBar Expanded">
<span class="imgContainer"></span>
<span>John Smith</span>
<img class="TradeDetailsLink" alt="v" src="/Applications/Images/Icons/action_arrow.gif">
<a class="TradeDetailsLink" id="DetailsLink" href="#">Trade Details</a>
</div>

<div id="tradeDetailsSelector" class="ContextMenuPanel" style="position: absolute; display:none;">
    <div id="AvailableMoneyItem" class="ContextMenuItem"><a href="#" onclick="javascript:popupAvailableMoney(); return false;">View Available NFS Money</a></div>
    <div id="OpenOrdersItem" class="ContextMenuItem"><a href="#" onclick="javascript:redirectToTradeCentral(); return false;">View Open Orders</a></div>
    <div id="LockCashBufferItem" class="ContextMenuItem"><a href="#" onclick="javascript:redirectToModelManagement(); return false;">Add/Edit Locks or Cash Buffer</a></div>
</div>

with the Jquery being in the document.ready() function. I just want to display the TradeDetailsSelector div directly under the "Trade Details" link when it's clicked. This code was modified from a different post that was said to work perfectly, but isn't for me.

$("document").ready(function(){
$('div#DetailsLink').bind('click',function(event){
$('#tradeDetailsSelector').css('left',event.pageX);
$('#tradeDetailsSelector').css('top',event.pageY);
$('#tradeDetailsSelector').css('display','inline');
$("#tradeDetailsSelector").css("position","absolute");

});
})

Any help anyone could give me would be great, right now nothing is happening at all and the developer tools in IE aren't showing any errors in the console so i don't know. Thank you, NickG

Answer 1

Working Demo

I changed from .bind to .on(), you could also use .click(). I would suggest having the inline CSS on the CSS file, like in the demo I posted. I also removed div because the link is not a div. Anyway, if you have a ID which is unique you don't need the div or in this case a before.

This is what i changed to make it work:

 $('#DetailsLink').on('click', function (event) { 

The whole code:

$("document").ready(function () {
    $('#DetailsLink').on('click', function (event) {
        $('#tradeDetailsSelector').css('left', event.pageX);
        $('#tradeDetailsSelector').css('top', event.pageY + 10);
        $('#tradeDetailsSelector').css('display', 'inline');
        $("#tradeDetailsSelector").css("position", "absolute");

    });
})