I've found a very weird issue with my form. I'm dynamically generating radio buttons, but in Internet Explorer (tested in versions 7 & 6), you cannot change the radio buttons after they've been added. In Firefox (testing in 3.6) it's fine. I've mocked up some code below which shows the issue. It generated up to 10 radio buttons (by random number) and checks that radio button programmatically. However you cannot manually select an already generated radio button.
HTML:
<form action="list.htm"> <div id="list"></div> <button id="btnChoose">Add radio button</button> </form>
Javascript:
var addRadioNode = function(nodeId) { var list = $('#list');
// check radio not in list already var found = false; $('input:radio', list).each(function(i) { if ($(this).val() === nodeId) { found = true; return false; } });
if (!found) { // create new radio var radio = $('<input/>').attr({ type: 'radio', name: 'confirmedMappings.InstanceKey', id: 'confirmedMappings_InstanceKey', value: nodeId }); var label = $('<label/>').append(radio).append(nodeId);
// append radio to list label.appendTo(list); }
// reset all radios $('input:radio', list).attr('checked', false); // select new radio $('input[value=' + nodeId + ']:radio', list).attr('checked', true); };
jQuery(function($) { $('#btnChoose').click(function(event) { var num = Math.floor(Math.random() * 10 + 1); addRadioNode('rad-' + num); event.preventDefault(); }); });
Anyone have any ideas what's going on? I was using jQuery v1.3.2
My aim is to
add a radio button to a list, without creating duplicates
Just for further info, to get round this I stopped using append, and went back to html string concatenation:
if (!found) { // create new radio with label - do not use append (problem in IE) var r = '<label><input type="radio" value="' + nodeId + '" id="confirmedMappings_InstanceKey" name="confirmedMappings.InstanceKey" />' + nodeId + '</label>';
// add radio to list list.html(list.html() + r); }