如何在 ajax 内容加载到新添加的 jquery ui 选项卡后执行回调函数

Question

Jquery UI 选项卡有一个添加事件，该事件在添加选项卡后立即触发。 在此示例中，单击按钮时，将添加一个新选项卡并将其选中。

我通过以下方式使用 ajax 添加动态内容：

var $tabs = $("#tabs").tabs({
    tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
    add: function (event, ui){
        var lastIndex = $("#tabs").tabs("length")-1;
        $("#tabs").tabs("select", lastIndex);
    }
});
function createTab(phpFile){
    $tabs.tabs("add", phpFile, "Tab Title"); 
}
$("button").on('click', function (){                   
    var url = "search.php?term=someRandomString";
    createPlaySongTab(url);      
});

我的目标是让新添加的内容像这样淡入面板

    add: function (event, ui){
        $(ui.panel).hide();
        var lastIndex = $("#tabs").tabs("length")-1;
        $("#tabs").tabs("select", lastIndex);
        $(ui.panel).fadeIn(1000);
    }

假设我的.php看起来像这样

<?php sleep(1); echo 'hello world!';?>

在这种情况下，内容根本不会淡入，因为淡入淡出的持续时间fadeIn(1000)，并且 add 事件是在添加选项卡后立即触发的，而不是在.php文件加载完成后触发的。 如何在内容完全加载后让内容淡入？

Answer 1

尝试加载事件。加载远程选项卡的内容后，应触发此事件。

$( ".selector" ).tabs({
   load: function(event, ui) { ... }
});

Answer 2

有 jquery 函数 ajaxcomplete((; 谷歌一下，希望这有帮助$('#element'(.ajaxcomplete(function(({ your stuff//}(;