ajax加载选项卡后回调

时间:2009-04-11 19:18:38

标签: jquery jquery-ui jquery-ui-tabs

如何将一些代码应用于加载ajax的选项卡的内容? 我尝试在加载的内容中使用$(document).ready,但这阻止了加载css样式(不知道为什么)。

是否有回调功能?我应该以其他方式在加载的文档中使用$(document).ready和styles吗?

如果在加载的文档中使用$(document).ready很好,我是否还应该在其中包含对jquery及其插件的引用?

5 个答案:

答案 0 :(得分:8)

你试过load event吗?当加载选项卡的内容时,应调用此方法。

通常,您不应将已加载的元素视为新页面并调用$(document).ready。这不是新页面,而是添加到DOM的一些新元素。所有ajax方法都具有一个在成功加载数据时调用的回调方法。

答案 1 :(得分:5)

您使用什么代码通过ajax加载内容?如果您使用jQuery命令,如loadajax,那么我建议您将代码放在回调函数中。例如,使用load

$('#myUITab').load('anotherPage.html', function() {

    // put the code you need to run when the load completes in here

});

答案 2 :(得分:2)

jQuery UI“Tabs”提供回调方法。请查看以下内容!

$( "#tabs" ).tabs({
    ajaxOptions: {
        error: function( xhr, status, index, anchor ) {
            $( anchor.hash ).html(
                "error occured while ajax loading.");
        },
        success: function( xhr, status ) {
            //alert("ajax success. ");    //your code
        }
    }
});

答案 3 :(得分:0)

另一种方法是使用ajaxComplete:

$("#loading_comtainer").ajaxComplete(function( event,request, settings ){
   alert("ajaxCompleted");
});

答案 4 :(得分:0)

您可以使用tabsload事件http://jqueryui.com/demos/tabs/#event-load

在下面的示例中了解它的工作原理:

$('#nav_tabs').tabs({
    select: function(event, ui){
        var url = $.data(ui.tab, 'load.tabs');
        if (url == '?ak=/account/logout') { 
            //exclude the logout from using ajax
            location.href = url;
            return false;
        }
        return true;
    },
}).bind('tabsload',function(event, ui){
    alert('The tab is loaded. What now?');
});