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

【问题标题】：... external page load with jQuery... + then run a function... 使用 jQuery 加载外部页面... + 然后运行一个函数
【发布时间】：2013-08-18 16:08:44
【问题描述】：

...我有一段简单的 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”不运行...谁能帮忙解决这个问题...？

【问题讨论】：

对于初学者，将 return false 语句移到 click 函数的底部。
move_div 的所有内容都在您的$('#info').click(function(){ 中。因此，如果您单击由#info 标识的元素，您将看到它运行..

标签： jquery function load

【解决方案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;
});

【讨论】：

【解决方案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;
    });
});

【讨论】：