引导徽章并不总是出现在Safari中

问题描述

我有一个工具，该工具具有3个选项卡，每个选项卡上都有一些计数器.该选项卡的标题应该具有徽章，该徽章显示该选项卡上所有计数器的总数.如果总数为0，则不应显示任何徽章.

I have a tool that has 3 tabs and some counters on each tab. The title of the tab is supposed to have a badge that shows a total of all counters on that tab. If the total is 0, it shouldn't show any badge.

这一切在Chrome和Firefox上都可以正常工作，但是在Safari(在OS X和iOS上)上，我都遇到了一些非常奇怪的行为，似乎无法调试.

This all works fine in Chrome and Firefox, but in Safari (both on OS X and iOS) I get some very strange behavior that I can't seem to debug.

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

I have a badge with some very simple code:

<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>

和一些用于重置徽章范围的html内容的javascript:

And some javascript to (re)set the html contents of the badge span:

// 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/ :

To replicate the behavior in this fiddle http://jsfiddle.net/ajLxsLc2/3/:

1. 单击加号以更新计数器，或者只需手动输入数字并单击输入框的关闭按钮-您会看到徽章出现在第一个标签上
2. 单击减号将计数恢复为0-您会看到徽章消失
3. 再次单击加号以更新计数器-这次徽章将不会出现在Safari中
4. 要显示徽章，请单击另一个标签或将鼠标悬停在您所在的标签上

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

I've confirmed that the HTML value is being set inside the badge's span, it's just not showing up when in Safari for some reason. Any help is much appreciated!

推荐答案

这是一个有趣的问题.我注意到徽章出现在鼠标上方，因此似乎可以解决该问题:

It's a funny issue. I noticed the badge appears on mouse over, so this seems to fix it:

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

看看此更新的小提琴

这篇关于引导徽章并不总是出现在Safari中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！