Question

...我有一个简单的jQuery代码加载到外部页面中：

$(document).ready(function(){

    $('#info a').click(function(){

        var href = $(this).attr('href');

        $('#info_show').load(href).fadeToggle();

        return false;

    });
});

加载页面后，我想运行一个将这些内容集中到窗口中的函数......

$(document).ready(function(){

    $('#info').click(function(){

        var href = $(this).attr('href');

        $('#info_show').load(href).fadeToggle();

        return false;

        function move_div(){

            window_width = $(window).width();
            window_height = $(window).height();

            obj_width = $('#holder').width();
            obj_height = $('#holder').height();

            $('#holder').css('top', (window_height / 2) - (obj_height / 2)).css('left', (window_width / 2) - (obj_width / 2));

        }

        $(window).resize(function(){

            move_div();

        });

    });

});

...'move_div'没有运行......任何人都可以帮忙解决这个问题吗？

T

Answer 1

.load函数接受一个将被调用的回调参数：

...在执行后处理和HTML插入之后。 \

请参阅：.load( url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] )

更新了移动返回的代码，并添加move_div作为加载完成回调：

$('#info').click(function(){

    var href = $(this).attr('href');

    function move_div(){

        window_width = $(window).width();
        window_height = $(window).height();

        obj_width = $('#holder').width();
        obj_height = $('#holder').height();

        $('#holder').css('top', (window_height / 2) - (obj_height / 2)).css('left', (window_width / 2) - (obj_width / 2));
    }

    $(window).resize(function(){
        move_div();
    });

    // Add move_div as the load complete callback
    $('#info_show').load(href, move_div).fadeToggle();

    return false;
});

Answer 2

在声明函数之前有一个return语句。因此，很可能永远不会执行move_div（）函数。

试试这个：

$(document).ready(function(){
    $('#info').click(function(){
        var href = $(this).attr('href');
        $('#info_show').load(href).fadeToggle();

        function move_div(){
            window_width = $(window).width();
            window_height = $(window).height();
            obj_width = $('#holder').width();
            obj_height = $('#holder').height();
            $('#holder').css('top', (window_height / 2) - (obj_height / 2)).css('left', (window_width / 2) - (obj_width / 2));

        }
        $(window).resize(function(){
            move_div();
        });
        return false;
    });
});

...用jQuery加载外部页面... +然后运行一个函数

2 个答案: