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
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.