javascript - jQuery事件不会自动触发

我有2个单选按钮，当选中其中任何一个时，它们都会执行某些操作。这是与它们绑定的JQuery：

$('input[name=24hours]:radio').on('change', function() {
    if($('#hours24y').is(':checked'))
    { $('table').hide(); }
    else if ($('#hours24n').is(':checked'))
    { $('table').show(); }

同样在表单中，我有一个重置按钮。单击重置按钮时，我试图触发上述事件：

$('[type=reset]').on('click', function(){
    $('input[name=24hours]:radio').triggerHandler('change');
});

问题是，第一次单击重置按钮时，它只会将单选按钮更改为初始状态。仅当再次单击重置按钮时，才会发生触发器jquery。
那么，如何使触发器jquery在首次单击“重置”按钮时自动运行？

编辑：这是行动的例子。当我单击＃hours24n单选按钮时，将显示一个表格。如果我单击＃hours24y单选按钮，则该表将被隐藏。

假设最初，该表格显示为＃hours24n被选中。然后，我检查＃hours24y，因此该表将被隐藏。现在，单击重置按钮后，我希望的是，将检查＃hours24n并同时再次显示该表格。

最佳答案

尝试在change处理程序})中添加右括号，括号，使用选择器'input[name=24hours][id=hours24n]:radio'，在.prop("checked", true)事件调用.triggerHandler('change')之前设置click，然后调用.click()事件设置#hours24n初始checked

$(function() {
   $('input[name=24hours]:radio').on('change', function() {
    if ($('#hours24y').is(':checked')) {
      $('table').hide();
    } else if ($('#hours24n').is(':checked')) {
      $('table').show();
    }
  })

  $('[type=reset]').on('click', function() {
    $('input[name=24hours][id=hours24n]:radio')
    .prop("checked", true).triggerHandler('change');
  }).click();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input type="radio" name="24hours" id="hours24y" />
<input type="radio" name="24hours" id="hours24n" />
<input type="reset" />
<table>
  <tbody>
    <tr>
      <td>
        checked
      </td>
    </tr>
  </tbody>
</table>