Alternative for jQuery attr() in IE?

Question

Ok, correct me if I'm wrong, but I take it that jQuery attr() does NOT work in IE. (marked wontfix) That being the case, what is the best alternative? For example, this works everywhere but IE:

jQuery(document).ready(function($) {
    $('.airsrc').each(function() {
        var $this = $(this);
        var src = $this.attr('data-websrc');
        $this.attr('src', src);
    });
});

Update: Whoops...I realize the issue. I actually had this inside an if statement based on a CSS3 media query. Media queries that aren't natively supported in IE8 or lower. The attr() definitely works!

Answer 1

I had a similar problem. I had some forms that I wanted to easily set whether the field was required or not. My form input looked like this:

< input id="myid" name="myname" type="text" required="true" />

It worked great in everything EXCEPT IE9! Doh!

The problem is that I do not want to set the new property with jQuery, and I don't want to extend the prototype for input elements.... I just want a solution that works in all browsers without a lot of extra code or branching.

I tried jQuery's prop() method, but again, it had to be set manually. I wanted something that would take all the DOM elements as-loaded and extract the data that way.

I found that the jQuery attr() method worked on all browsers except IE9. After poking at it for a while, I realized that the attribute was there but reading it was being handled a bit differently on IE9.

So, I ended up recalling the values this way:

var val = $('#elementID').attr('required') || $('#elementID')[0].getAttribute('required');

It is not perfect, but it worked great and did not require me to go back and rename my attributes with "data-" or to assign them after the DOM loaded.

Wouldn't it be great if jQuery 1.6.x would add this alteration to the attr() and prop() methods for us!

If anyone knows a more elegant solution that DOES NOT REQUIRE SETTING THE ATTRIBUTE AFTER PAGE LOAD, then please let me know.

Answer 2

It appears that attr() will fail in IE if you use a mixed-case attribute name. Be sure to use all lowercase letters for your attribute names.

Answer 3

please try this:

$this.data('websrc'); instead of $this.attr('data-websrc');

Answer 4

I use attr with data-* attributes on IE all the time, I've never had a problem. Here's a live version, just tested in IE6, IE7, and IE9. Don't have my IE8 box handy, but again, I've never had a problem.

Answer 5

I haven't had a problem with attr() working in IE. The description of the bug listed is:

JQuery function .attr does not works under IE, when attribute is event like .attr("onchange","alert('Hello event onchange!')"); . It is because IE does not understand this. You can check, if attribute is event, make eval function if IE.

Specifically, it has to do with events. Regular attributes shouldn't be a problem.