jQuery selector: Firefox recognize but IE not

Question

This is my element with a custom attribute:

<input type="radio" status="B" name="OPT_PARENT"/>

My script:
Alert($(this).attr("status"));
Alert($(this).attr("test"));

Output:
Firefox 3.0.10 --> "B" and "undefined"
IE 8.0.7600.16385 --> "true" and "undefined"

My observation:
IE will return the option button "checked state" which is true/false not the custom attribute value. But IE is definitely can detect whether the custom attribute exist.

My question: How to get my custom attribute value in IE?

score 2 · Answer 1 · answered Oct 07 '10 at 08:30

2

perhaps a better option would be to use jquery's Data() which allows you to attach data to DOM objects without modifying them with invalid/custom attributes.

i imagine this would eliminate the browser incompatibility issues.

answered Oct 07 '10 at 08:30

Ross

18,117
7
44
64

score 1 · Answer 2 · answered Oct 07 '10 at 08:45

1

Using custom attributes is generally a bad idea and what you have isn't valid even in HTML5 which is supposed to allow custom attributes. Why not pass any extra info as a class or as an ID ? You could have something like

<input type="radio" id="extra_A" name="OPT_PARENT"/>
<input type="radio" id="something_B" name="OPT_PARENT"/>
<input type="radio" id="extra_C" name="OPT_PARENT"/>

The reason I prefixed it is so that it would be easier to select just the elements that you need:

$("input[id^=extra_]").each(function() {
    alert($(this).attr('id').substr(6));
});

Hope this helps.

answered Oct 07 '10 at 08:45

Valentin Flachsel

10,795
10
44
67

this is my old style. somehow i dont like it coz of the substr. I havent study bout HTML5 so i'll take a look on what do you mean by "isn't valid even in HTML5". Thank you for ur comment. – Coisox Oct 07 '10 at 09:01
See [this question](http://stackoverflow.com/q/994856/230354) for more info. As for `.substr()` there's nothing wrong in using it, and as opposed to custom attributes, it won't invalidate your markup. Either way, glad to be of help. :) – Valentin Flachsel Oct 07 '10 at 09:09

score 0 · Accepted Answer · answered Oct 07 '10 at 08:30

This is a workaround for IE, using outerHTML

var status = 
   ($(this)
    .get(0)
    .outerHTML
    .replace(/^.+?\bstatus\s*=\s*(?:['"])(\w+).*$/, 
       function(tag, valueattr) {
          return valueattr;
       })) || '';

score 0 · Answer 4 · answered Oct 07 '10 at 08:56

0

Thanks all. Somehow my friends told me that "status" is probably a non-custom attribute. So after change "status" --> "myStatus" my code work well.

answered Oct 07 '10 at 08:56

Coisox

1,002
1
10
22

jQuery selector: Firefox recognize but IE not

4 Answers4