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>');
});

复制这个小提琴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();
    });

看看at this updated fiddle