jquery - ajax加载选项卡后的回调

Question

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

有回调函数吗？我应该以其他方式在加载的文档中使用 $(document).ready 和样式吗？

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

Answer 1

您是否尝试过加载事件？加载选项卡的内容时，应该称呼这一点。

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

Answer 2

您使用什么代码通过 ajax 加载内容？如果您使用 jQuery 命令load或ajax然后我建议将您的代码放在回调函数中。例如，使用load

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

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

});

Answer 3

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
        }
    }
});

Answer 4

另一种方法是使用 ajaxComplete：

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

Answer 5

您可以使用 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?');
});