Dynamically added radio button not updated when clicked in IE6, IE7_问答_开发者

Dynamically added radio button not updated when clicked in IE6, IE7

开发者 https://www.devze.com 2023-01-30 19:34 出处：网络

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 update

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')                
            })