Differences between IE and FF when using jquery and textarea

This seems to be a simple issue, but so far I've been thwarted at almost every turn.

I am dynamically building a user interface using jquery and json using a list of ids that are returned from multiple selections. Part of that interface includes a user justification which is dynamically created as such:

$('<textarea>').attr({
'rows': '5', 
'cols': '50', 
'name': appId,  
'id': 'AppJust' + appId}).appendTo('#contentColumn>#AppPanel' + appId);

Further on in the process I have the following code:

var userJustification = $('textarea[name=' + appId + ']').val() ;

In FF if I alert userJustification I get the text that was typed into the textarea.

In IE if I alert userJustification I get undefined.

I've also tried var userJustification = $('textarea[name=' + appId + ']').attr('value') ; with the exact same results.

If I completely change:

var userJustification = $('textarea[name=' + appId + ']').val() ;

to:

var userJustification = $('textarea#AppJust' + appId).val() ;

It works...

My questio开发者_高级运维n is:

Why does the name approach work in FF and not IE?

EDIT

Using the information Scott posted, I was intrigued and I tinkered with the code a little bit.

var userJustification = $('textarea[name=' + appId + ']').val() ; 

But it still does not work in my environment (IE7)... I'm not sure why or how because for all intents and purposes that should work properly. Scott's fiddle proves this.

So for no good reason (by accident actually) made a tiny alteration to the code:

var userJustification = $('textarea[name = ' + appId + ']').val() ; 

(notice the space before and after the '=' inside the selector)

And it works... At first I thought it had something to do with appId being an integer... but even in fiddle if I change "One" to 25... it still works properly.

I verified in FF to see how it was being rendered.. and here is an example of how the text area looks when it is is created... nothing out of the ordinary:

<textarea id="AppJust40" rows="5" cols="50" name="40"></textarea>

Could it have something to do with the way the page itself is being rendered? Its an Apex application on an Apache server????

Per our conversation in your comments, adding quotes around the attribute value solves the issue in IE7 for you:

$('textarea[name="' + appId + '"]').val();

Even though the working jsFiddle demo I first put in your comments works in both IE7 and IE8 without the quotes.

It's very odd, the only thing I can think is that IE doesn't support attribute selectors (CSS, [name=]). However this shouldn't matter as JQuery uses it's own engine to 'find' elements within the DOM.

I would recommend logging this as a bug on JQuery.