Переменная Javascript неправильно изменяется при клике

У меня есть следующий скрипт.

$(function () {

    $('#slider').slider({
        value: 50,
        min: 10,
        max: 100,
        step: 10,
        slide: function (event, ui) {
            $("#slider-value").html(ui.value);
            $("#hiddenbox").val(ui.value);
        },
        change: function (event, data) {

            $("#slider-value").html($('#slider').slider('value'));

            var sliderValue = hiddenbox.value;
            $("#div1").load(bob, {sliderValue: sliderValue}, function(responseTxt,statusTxt,xhr){
                if(statusTxt=="error")
                    alert("Error: "+xhr.status+": "+xhr.statusText);
            }); 
        }
    });

    $("#show-slider").click(function() {
        $('#slide').toggle("slow");
    });
});

Я определяю, какой файл загрузить с помощью переменной (bob). Это должно привести к тому, что JquerySlider изменит содержимое Div1 на страницу, указанную в bob.

Событие клика по другому параметру меню должно переназначить переменную:

$(document).ready(function(){
    $("#sport").on("click", function(){
        var page = "sport.php";
        var sliderValue = hiddenbox.value;
        var bob = "sport.php";
        $("#div1").load("sport.php", {sliderValue: sliderValue, page: page}, function(responseTxt,statusTxt,xhr){
            if(statusTxt=="error")
                alert("Error: "+xhr.status+": "+xhr.statusTexe. t);
        });
    });
});

Однако на данный момент все, что происходит, - это слайдер. Если вы переместите его и переход на страницу, тогда происходят изменения, но, кроме того, они не реагируют.

Объявили bob, используя:

$(document).ready(function(){
    var bob;
});