jQuery - IE 淡入（），然后立即淡出（）问题答案

【问题标题】：jQuery - IE fadeIn(), then immediately fadeOut() issuejQuery - IE 淡入（），然后立即淡出（）问题
【发布时间】：2018-03-21 03:37:29
【问题描述】：

我不确定这是点击问题，还是特定于 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

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

【问题讨论】：

标签： javascript jquery css internet-explorer

【解决方案1】：

我想通了。

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

以下是更新后的行：

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

希望这可以在将来对其他人有所帮助。

【讨论】：