Question

我不确定这是点击问题，还是特定于jQuery淡入淡出功能。

我有这样的HTML结构：label > input(hidden) + div + label text

示例：

<label data-name="primary-residence" data-value="Yes">
    <input type="hidden" id="primary-residence" name="Primary Residence" value="" />
    <div class="big-check-box"></div>
    Primary Residence
</label>

jQuery如下：

$('label').on('click', function(){
    var name = $(this).data('name');
    var value = $(this).data('value');
    if($(this).find('.big-check-box').hasClass('checked')){
        $(this).find('.big-check-box').removeClass('checked');
        $('#'+name).val('');
        $('#'+name+'-value, #'+name+'-loan-balance').fadeOut();
    }else{
        $('#'+name).val(value);
        $(this).find('.big-check-box').addClass('checked');
        $('#'+name+'-value, #'+name+'-loan-balance').fadeIn();
    }
});

我有big-box作为复选框，并且具有数据属性，然后填充要在表单提交时收集的隐藏字段。它还将一个类应用于复选框，并淡入两个新的输入字段。

在Chrome和FF中一切正常，但在IE中，该类不会应用于该框并且新输入字段淡入，然后在淡入动画完成后立即淡出。除非它们被点击两次，否则它似乎有效，但这不是非常直观或用户友好。

这是一个工作示例的小提琴：jsFiddle

任何人都知道为什么会这样吗？

Answer 1

我明白了。

出于某种原因，我需要为IE修复添加preventDefault()。不完全是为什么它有效，但这里有参考：<label> - HTML | MDN

这里有更新的行：

$('label').on('click', function(e){
    e.preventDefault();
    .....
});

希望将来可以帮助其他人。

jQuery - IE fadeIn（），然后立即fadeOut（）问题

1 个答案: