Dynamically added radio button not updated when clicked in IE6, IE7
I have added a group of radio buttons dynamically to the DOM using jQuery. I have registered event handlers, which work well. However, when clicked in IE6 and IE7, the radio button group is not updated with which button is checked.
My original code is analogous to this:
<body>
<form action="radio-ie7_submit" method="get" accept-charset="utf-8"></form>
<script type="text/javascript" charset="utf-8">
$(function() {
$.each(['A','B', 'C'], function (i, e) {
$('<input>')
.attr('type', 'radio')
.attr('name', 'foo')
.attr('checked', i == 1 ? 'checked' : '')
.val(e)
.appendTo($('form'))
.after(e + '<br />')
.click(function(){
alert('Kliiik')
})
})
})
</script>
</body>
Again, when I click a radio button, the event handler is called correctly, but the radio buttons are not updated. I have made this hack which seems to work:
<body>
<form action="radio-ie7_submit" method="get" accept-charset="utf-8"></form>
<script type="text/javascript" charset="utf-8">
$(function() {
$.each(['A','B', 'C'], function (i, e) {
$('<input>')
.attr('type', 'radio')
.attr('name', 'foo')
.attr('checked', i == 1 ? 'checked' : '')
.val(e)
.appendTo($('form'))
.after(e + '<br />')
.click(function(){
$('input[name="' + this.name + '"]').each(f开发者_如何学运维unction () { this.checked = false });
this.checked = true;
alert('Kliiik')
})
})
})
</script>
</body>
Basically, what my fix is doing is to uncheck all the buttons in the radio button group, then mark the one clicked as checked. It seems to be a bit hacky. Is there a better way to handle this? Has anyone come across this problem and can give some more insight into the why this behaves the way it does?
Thanks.
This is a old IE problem with form elements. It's not the Jquery that are to blame here. If you want a work-around for IE 6 user then you can make your click function as this
.click(function(){
$('input[name="' + this.name + '"]').attr('checked','');
this.checked = true;
alert('Kliiik')
})
加载中,请稍侯......
精彩评论