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

Question

我有一张表格，其中包含两列。

第一列是父级名称，第二列是子级名称。默认情况下选择第一个父元素。我隐藏了每个父级的子元素，除了第一个元素。

以下是代码，它的工作原理类似手风琴（一次只能显示一个）：

$(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中，当文档模式为IE7标准时，如果我点击第一个选中的元素，change事件会被触发。虽然只有当我点击选中的元素时才会发生。我想防止这种情况发生。

我查看了为什么使用val()设置select的值时，jquery的change事件不会触发？

采纳的答案说：

change事件需要由用户启动的实际浏览器事件，而不是通过javascript代码。

有什么解决办法吗？

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

- Hardik Mishra

---

对我来说，这段代码在IE9上运行良好。 - Subedi Kishor

@KishorSubedi：如果您设置“文档模式：IE7标准”，它将无法正常工作。我需要那个。 - Hardik Mishra

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

工作的fiddle

- ilyes kooli

---

“change”事件在没有覆盖的情况下就会被触发。问题是，当我再次点击相同的元素时，它似乎无法识别。 - Hardik Mishra

如果您设置文档模式为IE7标准，则无法正常工作。由于遗留原因，我需要这样做。 - Hardik Mishra