Reputation: 130
Source code at: http://jsfiddle.net/lski/4aTm5/
I have succeeded in getting the above code in Firefox, Chrome and IE9, but not on IE8 and below.
What I wanted was:
To give the user the ability to fill in multiple select boxes that have the same name, each appearing in a new row. Only the first select is mandatory, the second...nth are optional.
I wish to display the second box at a minimum, and dynamically add new rows (with a new drop down) when necessary. The new row will have a blank selection, then if the user selects from that list a new row, with a new drop down is added to the bottom. If the user chooses to not have a particular option they they set it to blank and the row is removed.
The issue I think Ive found:
I have this all working, as shown by the link above, in Firefox, Chrome and IE9 but does not work correctly in IE8 and below, when selecting on the dynamically created . I think this is because the bubbling code added to simulate this behaviour in IE8 and below isnt being added to the dynamically added selects so the delegated event handler is not picking them up.
Has anybody else had this issue? or is it my code? if its an issue I will post a bug report but wanted to check first to see if it was me.
Thank you in advance, Lee
Upvotes: 1
Views: 1376
Reputation: 130
In the end I submitted a bug report, however someone had beaten me too it ;) but thought I would re-lay here in case anybody with a similar issue stubbles on this question.
The issue has been identified by the jQuery team and apparently under review for jQuery 1.7.2 for those that require this functionality.
I worked around it by separating the handler function and attaching as a direct handler on each clone, which worked for me.
Upvotes: 0
Reputation: 17888
From what I understand (and I might be wrong) the IE up to version 7 doesn't handle correctly name attributes of newly created elements and changing name attributes on the fly.
Basically what is important if you are ok to support IE8+ you need to make sure it will not render in compatibility mode for IE. I used following meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
More on this crap: http://blogs.msdn.com/b/askie/archive/2009/03/23/understanding-compatibility-modes-in-internet-explorer-8.aspx
I believe you can't achive this using IE7- and neither in IE8 when it doesn't render in IE8 Standard mode.
Edit: I am quite sure you are aware of that but you can check the rendering mode in IE8 by pressing F12, it's in the top line Document mode.
Upvotes: 2