引导徽章并不总是出现在Safari浏览器(Bootstrap badge don't alw

2019-10-22 22:27发布

我有一个有3个选项卡,每个选项卡上的一些专柜的工具。 该选项卡的标题应该有一个徽章一共展示了该选项卡上的所有计数器。 如果总为0,它不应该出现任何徽章。

这一切工作在Chrome和Firefox罚款,但在Safari(无论在OS X和iOS)我得到一些非常奇怪的行为,我似乎无法调试。

我有一些非常简单的代码徽章:

<li role="presentation">
    <a href="#AB-bulk" aria-controls="AB-bulk" role="tab" data-toggle="tab" class="climb_type_nav">
        Auto-Belay       
        <span class="badge" id="AB-badge"></span>
    </a>
</li>

而一些JavaScript来(重新)设置的徽章跨度的HTML内容:

// reset badge counts
$.each($('.climb_type_nav').find('.badge'), function (i, x) {
    $(x).empty();
});

// get counts per climb type
$.each($('.input-number'), function (i, x) {
    var climbs = parseInt(x.value, 10);
    if (climbs > 0) {
        var shortName = x.getAttribute('climb_type_short_name');

        if (!ct[shortName]) {
            ct[shortName] = 0;
        }
        ct[shortName] += climbs;
    }
});

// set badge counts
$.each(ct, function (shortName, count) {
    $('#' + shortName + '-badge').html('<b>' + count + '</b>');
});

要复制这个小提琴的行为http://jsfiddle.net/ajLxsLc2/3/ :

  1. 点击加号以更新计数器,或者只是手动输入一个号码,然后点击关闭输入的 - 你会看到徽章出现在第一个选项卡
  2. 点击减号来获得计数回0 - 你会看到徽章消失
  3. 再次点击加号以更新计数器 - 这一次的徽章将不会出现在Safari浏览器
  4. 为了让出现在徽章,可以单击另一个选项卡上,或者你的标签将鼠标悬停在

我已经证实,HTML值被设置徽章的范围内,它只是没有在Safari中由于某种原因显示出来。 任何帮助深表感谢!

Answer 1:

这是一个有趣的问题。 我注意到在鼠标上出现的标志,因此这似乎解决它:

    // set badge counts
    $.each(ct, function (shortName, count) {
        $('#' + shortName + '-badge')
            .html('<b>' + count + '</b>')
            .parent().focus().blur();
    });

看看在这个更新的小提琴



文章来源: Bootstrap badge don't always appear in Safari