jquery ui：ajax 页面 +滑块内容（第 2 部分）

Question

跟进我之前发布的帖子。我已经找到了所有要点的答案。但我仍然有一个小问题，我无法正确处理 -

这是我需要将其传递到滑块中的百分比值 -

var percentage = Math.round(offset.left / (scrollContent.width() - scrollPane.width()) * 100);
scrollbar.slider("value",percentage);

每次当我将滑块手柄向右移动时，百分比应该增加。当我加载前两个 ajax 页面时（百分比增加），这很好，但在前两个页面之后，百分比开始下降，直到负值。

我怎样才能找到正确的百分比？

您可以在此处尝试一下，看看我做了什么上面的意思。

下面是整个 jquery 代码：

$(document).ready(function(){

    loadSlide ();

});


function loadSlide ()
{
    //scrollpane parts
    scrollPane = $('#scroll-pane'); // scroll-pane
    scrollContent = $('#scroll-content'); // scroll-content

    //alert(scrollContent.width());

  scrollbar = $("#content-slider").slider({
    min: 0,
    create: loadContent,
    animate: true,
    change: handleSliderChange,
    slide: handleSliderSlide
  });
}

function handleSliderChange(event, ui)
{

  var maxScroll = scrollContent.width() - scrollPane.width();
  scrollPane.animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000);

}

function handleSliderSlide(event, ui)
{

  var maxScroll = scrollContent.width() - scrollPane.width();
  scrollPane.attr({scrollLeft: ui.value * (maxScroll / 100) });

}

function loadContent(event, ui) 
{
    $('.load-content').click(function(){

        var path = $(this).attr('href');
        var parent = $(this).parents('.content-item');

        parent.after('<div class="wrapper"></div>');

        var target = $('.wrapper').css({float:'left'});
        target.load(path, function(){

            var width_loaded_content = target.width();
            var offset = target.offset();
            var position = target.position();
            scrollContent.css({width: (scrollContent.width() + width_loaded_content) + 'px'});

            var percentage = Math.round(offset.left / (scrollContent.width() - scrollPane.width()) * 100);
            alert(percentage);
            scrollbar.slider("value",percentage);

            exitContent (target);
        });

        return false;
    });
}

function exitContent (target)
{
    $('.exit-content').click(function(){
        scrollbar.slider("value",0);
        scrollContent.css({width: (1500) + 'px'});
        target.remove();
        return false;
    });
}

另一个问题是，为什么它有时会在 ajax 页面加载后发出两次警报，但有时却不会？它应该总是提醒一次。

有什么想法吗？