javascript - Jquery 无法识别点击

Question

我正在构建一个 web 应用程序(我是 javascript 的新手)，当我单击附加了 .click 监听器的内容时​​，jquery 拒绝执行任何操作。此外，它不会动画。我做错了什么，不知道是什么。

代码:

 function loadTabBar()
{
    person = false;
    sale = false;
    current = false;
    wine = false;
    if(!person && !sale && !current && !wine)
    {
        justOpened();
    }

    function useTabBar(){

    $('#PersonDiv').click(function()
    {
        alert('hi')
        activatePerson();
    });
    $('#Current').click(function()
            {
                activateCurrent();
            });
    $('#Sale').click(function()
            {
                activateSale();
            });
    $('#Wine').click(function()
            {
                activateWine();
            });

    function activatePerson()
    {
        if(!person)
        {
            var newImg="#Person";
            if(sale)
            {
                var oldImg="#Sale"
                changeImg(oldImg, newImg);
            }
            if(wine)
            {
                var oldImg="#Sale"
                changeImg(oldImg, newImg);
            }
            if(current)
            {
                var oldImg="#Sale"
                changeImg(oldImg, newImg);
            }
            person = true;
            current = false;
            wine = false;
            sale = false;

        }
    }
    function activateSale()
    {
        if(!sale)
        {
            var newImg="#Sale"
            if(person)
            {

                var oldImg="#Person"
                changeImg(oldImg, newImg);
            }
            if(wine)
            {
                var oldImg="#Wine"
                changeImg(oldImg, newImg);
            }
            if(current)
            {
                var oldImg="#Current"
                changeImg(oldImg, newImg);
            }
            person = false;
            current = false;
            wine = false;
            sale = true;
        }
    }
    function activateWine()
    {
        if(!wine)
        {
            var NewImg = "#Wine"
            if(sale)
            {
                var oldImg="#Sale"
                changeImg(oldImg, newImg);
            }
            if(person)
            {
                var oldImg="#Person"
                changeImg(oldImg, newImg);
            }
            if(current)
            {
                var oldImg="#Current"
                changeImg(oldImg, newImg);
            }
            person = false;
            current = false;
            wine = true;
            sale = false;
        }
    }
    function activateCurrent()
    {
        var newImg = "#Current";
        if(!current)
        {
            if(sale)
            {
                var oldImg="#Sale"
                changeImg(oldImg, newImg);
            }
            if(wine)
            {
                var oldImg="#Wine"
                changeImg(oldImg, newImg);
            }
            if(person)
            {
                var oldImg="#Person"
                changeImg(oldImg, newImg);
            }
            person = false;
            current = true;
            wine = false;
            sale = false;
        }
    }
    function changeImg(oldImg, newImg)
    {
            $(oldImg).fadeOut('fast', function()
            {
                $(this).attr('src', ('http://www.jagspcmagic.com/' + oldImg.substring(1) + '1.png'), function(){
                    if(this.complete) $(this.fadeIn('fast'));
                });
            })                              
            $(newImg).fadeOut('fast', function()
            {
                $(this).attr('src', ('http://www.jagspcmagic.com/' + oldImg.substring(1) + '2.png'), function(){
                    if(this.complete) $(this.fadeIn('fast'));
                });
            })

    }
}function justOpened()
{
    $('#Person').fadeOut('fast', function()
            {
                $('#Person').attr('src', 'http://www.jagspcmagic.com/Person2.png', function(){
                    $(this.fadeIn('fast'));
                });
            })  
    person = true;
    useTabBar();
}}

JSfiddle:(不要介意那些可怕的图形，我不想上传我的实际图形，因为它们还没有版权。http://jsfiddle.net/hFBMB/)

Answer 1

您将必须调用 loadTabBar()，或者您可以将代码置于 ready 状态而不是 loadTabBar()。

$(document).ready(function(){

//code goes here

});