javascript - jQuery - IE fadeIn(), then immediately fadeOut() 问题

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 中，该类未应用于框，新输入字段淡入，然后在淡入动画完成后立即淡出。除非它们被点击两次，否则它似乎可以工作，但这不是很直观或用户友好。

这是一个工作示例的 fiddle :jsFiddle

有人知道为什么会这样吗？

Answer 1

我想通了。

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

这是更新后的行:

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

希望这对以后的其他人有帮助。