Question

This one has me stumped. I’m using the “for” attribute on some links to identify the element they’re supposed to act on. Everything seems to be working just fine in Firefox, IE9, and IE8 … but IE7 breaks and returns “undefined.”

Here’s the gist of the jQuery code I’m using:

$(document.ready(function() {
    var editor_icons = $('.edit-button');

    editor_icons.each(function() {
        var $this = $(this),
            parent = $('#' + $this.attr('for'));

        var left = parent.position().left + parent.innerWidth() - 58 - 3,
            top = parent.position().top + 3;

        // ... you get the point ...
    });
});

An example HTML element this should be acting on:

<div id="content_wrapper">
    <a class="edit-button" href="javascript:void(0);" for="index_primary_content" />
    <div id="index_primary_content">
        ....
    </div>
</div>

Before you point it out, I realize anchors aren’t supposed to be auto-closing elements. The HTML I’m sending from my application is <a></a> and IE is interpreting it as <a />. I added a   in between the elements to make sure it wasn’t an interpretation issue, and I get the exact same error.

The problem is that $this.attr('for') returns “undefined”, so parent.position().left throws an “object is null or undefined” error.

I dug down with watch variables a bit, and I can see that the selectors are working, and $this in this context does select the right elements and does have the “for” attribute set … but jQuery isn’t finding it I think.

As I said, it works just fine in Firefox, IE9, and IE8 … just not IE7. Ideas?

For reference, I’m using jQuery 1.6.2 …

Answer 1

Instead of for use a custom attribute instead; target_ele for example.

Your editor will yell at you, but it will work.