[jQuery] Hooking up click() callbacks in IE with an 'each' loop

[jQuery] Hooking up click() callbacks in IE with an 'each' loop


Hi all,
I've been working on a project using jQuery that runs just fine in FF,
Safari, Chrome, Opera...you know the deal. IE is patchy at best.
One of my central problems is this bit of code:
$(".item").each(function() {
    $(this).find(".openlink").click(bodyCallback);
});
As you can imagine, the page includes a number of DIVs of class
'item', each of which has a child item of class 'openlink'. The goal
here is to link up a callback, defined earlier, to each of these
'openlink' children. HTML setup is roughly like this:
<div class="item" id="item-div-22">
    <div class="item-header">
        <span class="actions">
            <img alt=">" src="/media/img/arrow-right.png" id="arrow-image"
class="openlink"/>
            <input type="checkbox" class="actioncheckbox"/>
        </span>
        [...content...]
    </div>
</div>
Now, the issue is that, in any other browser, clicking on the
'openlink' properly calls the callback. In Internet Explorer (this is
IE8, have not tested with IE7 or, God forbid, IE6 yet), the callback
for the LAST 'item' DIV is called, whenever ANY 'openlink' is clicked.
Each callback's action is dependent on exactly what element it is
connected to. In other words, the callback includes a line:
var idnum = $(this).parents(".item").attr("id").replace("item-div-",
"");
It then uses this idnum for various purposes.
When I click ANY 'openlink', therefore 'idnum' comes out to the ID of
the last 'item' DIV on the page.
Is there a known bug with interaction between 'each' and events? Is
there something I'm doing wrong?
Any ideas would be greatly appreciated.
Thanks,
Greg Johnston