Bootstrap 徽章并不总是出现在 Safari 中

Question

我有一个工具有 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>');
});

要复制此 fiddle http://jsfiddle.net/ajLxsLc2/3/ 中的行为：

单击加号以更新计数器，或者只需手动输入一个数字并单击关闭输入 -- 您会在第一个选项卡上看到徽章
单击减号使计数回到 0 -- 您会看到徽章消失
再次单击加号更新计数器 -- 这次徽章不会出现在 Safari 中
要显示徽章，请单击另一个选项卡或将鼠标悬停在您所在的选项卡上

我已经确认 HTML 值设置在徽章的范围内，只是由于某种原因在 Safari 中没有显示。非常感谢任何帮助！

Answer 1

这是一个有趣的问题。我注意到徽章出现在鼠标悬停时，所以这似乎可以解决它：

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

看看at this updated fiddle

Bootstrap 徽章并不总是出现在 Safari 中

Bootstrap badge don't always appear in Safari

safari

jquery

twitter-bootstrap