选中元素上的单选按钮更改事件

Question

I have a table which contains two columns.

Let say First column contains Parent Name, and second child names. First parent element is selected by default. I am hiding children of every parent except first element.

Here is the code which works like Accordion(At a time only one should be visible) :

$(document).ready(function()  {
    var childs = $('.tableCellWBorderGray > div'); // child divs
    childs.hide();

    $("input:radio[name=attribute]").change(function(){
              var parent = $(this).parent().next(); // In our case, second td
              var kids = parent.children();
              childs.slideUp('slow');
              kids.slideDown('slow');
        });
     // select first element and trigger change event to show childs.  
    $('input:radio[name=attribute]:nth(0)').attr('checked',true).trigger('change');
});

This works fine on every other browser.

But in IE with Document Mode: IE7 Standards When I click on first checked elements, the change gets fired. Though this happens only once If I click on checked element. I want to prevent it.

I have looked into Why does the jquery change event not trigger when I set the value of a select using val()?

The accepted answer says that

The change event requires an actual browser event initiated by the user instead of via javascript code.

Is there any work around ?

Full Example: http://jsfiddle.net/CZZeR/2/

Answer 1

You have to override the attr function to fire change event

Code:

$(function() {
    var $attrFn = $.fn.attr;
    $.fn.extend({
        attr: function() {
            var attrCatch = $attrFn.apply(this, arguments);
            if (arguments.length) {
                $(this).change();
            }
            return attrCatch;
        }
    });
});

Working fiddle