Question

I have the following HTML:

<div id="main">
    <a id="sub1">sub1</div>
    <a id="sub2">sub2</div>
</div>
<div id="other" style="display:none">
 some stuff    
</div>

and the following jQuery:

$("div#main a").click(function () {
    $("#other").fadeIn(500,AlertSomething);
});

function AlertSomething()
{
     alert($(this).attr("id"));   
}

I would like to alert the ID of the anchor that was clicked from my call back function, but the alert always shows “other”. After reading this in the documentation:

The callback is not sent any arguments, but this is set to the DOM
element being animated.

I understand why, but I’m curious if it would be possible to do what I want?

Fiddle available here: http://jsfiddle.net/RxcRY/

Answer 1

Simply pass your AlertSomething method the ID.

$("div#main a").click(function () {
    $("#other").fadeIn(500, AlertSomething($(this).attr("id"));
});

function AlertSomething(theID)
{
    alert(theID);   
}

Here’s a working fiddle.

Site Note:

You’re anchor tags are being closed with </div> instead of </a>. This will result in jQuery attaching to the click event of the first anchor, but not subsequent anchors. Once you fix your markup, jQuery will attach to each anchor within the div.