使用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');
        });
});