jQuery UI滑塊附加標簽

Question

我有一個模態，它會在某些時間顯示，並且上面有兩個滑塊，應該顯示一些值。 這是代碼：

div#averageAnswerModal.modal.fade.custom-modal(tabindex="-1", role="dialog", aria-labelledby="myModalLabel" aria-hidden="true")
div.modal-content
    div.modal-body(style='text-align: center;')
        h2 Your neighbor's answers average was:
        div
            div#noAvg Your neighbors didn't give any anwer
            div#avgSlider
            span#avgLabel
        h2 Your answer was:
        div
            dvi#notAnswered You didn't give anwer
            div#yourSlider
            span#yourLabel

我有這段代碼來設置sldiers

initializeModal = function() {
        var positionLabel = function(label, slider, val) {
            $(label).html(val).position({
                my: 'center top',
                at: 'center bottom',
                of: $(slider + ' > .ui-slider-handle')
            })
        }

        myModal = $('#averageAnswerModal').modal({
            show: false,
            keybord: false
        })

        $("#avgSlider").slider({
            max: 100,
            disabled: true,
            change: function(event, ui) {
                positionLabel('#avgLabel', "#avgSlider", ui.value)
            }
        })

        $("#yourSlider").slider({
            max: 100,
            disabled: true,
            change: function(event, ui) {
                positionLabel('#yourLabel', "#yourSlider", ui.value)
            }
        })
    }

這段代碼激發了它們：

createSplashSliders = function(avg, your) {
    myModal.modal('show')
    if (avg === -1) {
        $("#noAvg").show()
        $("#avgSlider").hide()
        $('#avgLabel').hide()
    } else {
        $("#noAvg").hide()
        $("#avgSlider").show()
        $('#avgLabel').show()
        $("#avgSlider").slider('value', avg)
    }

    if (your === -1) {
        $("#notAnswered").show()
        $("#yourSlider").hide()
        $('#yourLabel').hide()
    } else {
        $("#notAnswered").hide()
        $("#yourSlider").show()
        $('#yourLabel').show()
        $("#yourSlider").slider('value', your)
    }
}

滑塊正確顯示，我想將選定的值附加到手柄下方。 它在下面附加了2行之類的值，如果我重復使用該頁面，則每次出現模態時，跨度都會向下移動一行。 當我在positionLabel使用調試器停止代碼並僅復制並粘貼相同的代碼時，標簽將粘貼到正確的位置。

我已經被這個問題困擾了半天，但我仍然無法弄清楚出什么問題了。

UPDATE

小提琴 。 如果將調試器放在positionLabel然后逐步執行，它將正確放置標簽。 所以在某個地方，我有時間問題，只是不知道在哪里或為什么。

Answer 1

如果我添加超時

        var positionLabel = function(label, slider, val) {
            setTimeout(function() {
                $(label).html(val).position({
                    my: 'center top',
                    at: 'center bottom',
                    of: $(slider + ' > .ui-slider-handle')
                })
            }, 200);
        }

這可以...但是超時不為5 。 為什么我需要這個超時時間？