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

Question

我有一个包含两列的表格。

假设第一列包含 parent 姓名和第二个 child 姓名。默认选择第一个父元素。除了第一个元素，我隐藏了每个父元素的子元素。

这是像 Accordion 一样工作的代码(一次只有一个应该可见):

$(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');
});

这在所有其他浏览器上都能正常工作。

但是在 IE 中使用 Document Mode: IE7 Standards 当我点击第一个选中的元素时，change 被触发。虽然这只发生一次如果我点击选中的元素。我想阻止它。

我调查了Why does the jquery change event not trigger when I set the value of a select using val()?

接受的答案是这样说的

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

有什么解决办法吗？

完整示例: http://jsfiddle.net/CZZeR/2/

Answer 1

你必须覆盖 attr 函数来触发 change 事件

代码:

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

Working fiddle