javascript - 使用 iCheck 时复选框无法正确呈现。必须触发复选框两次

Question

我正在尝试使用 iCheck 复选框来美化我的正常复选框。代码中的ajax动作触发了后端部分数据的重新计算，并为前端获取新数据。之后重新渲染 html 以显示新数据。这部分已经在使用普通复选框。添加 iCheck 时它仍然有效，但有时重新渲染会导致显示旧的 html。有时它第一次起作用，但通常我需要检查该框 2 次。当第一次点击失败时，当我第二次触发它时它总是有效。我想不通，为什么会这样。它不是关于单击复选框太快。我已经检查过了。

继承人的代码：

<tr class="abc">
    <td class="description">
        <div class="foo">
            <div class="form-item-checkbox clearfix">
                <h:selectBooleanCheckbox id="checkboxid"
                    styleClass="form-checkbox" value="#{valueToInitializeFromBackend}">
                    <f:ajax event="click" render="@none" execute="@this"
                        listener="#{action.ajax(ciid,'setStuffInBEAndRerenderFE')}" />
                </h:selectBooleanCheckbox>
            </div>
        </div>
    </td>
</tr>


 $(document).ready(function(){
   var bar = $('.bar');
                var abc = $('.abc');

                abc.find('.foo input')
                        .on('ifChecked', function () {
                            $(this).click();
                        })
                        .on('ifUnchecked', function () {
                            $(this).click();
                        });            
 });




 $(document).ready(function(){
        $('input').iCheck({
        checkboxClass   : 'form-checkbox',
        radioClass      : 'form-radio'
        });

        $('button[type="reset"]').click(function(){
            $(this).closest('form').find('input').iCheck('uncheck');
        });
});