javascript - jquery事件不会自动触发

Question

我有 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 将被选中，同时表格将再次显示。

Answer 1

尝试将右括号、括号添加到 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>