Question

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

我正在使用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（）;谷歌，希望这有帮助 $（＆＃39; #lement＆＃39;）。ajaxcomplete（function（）{your stuff //}）;

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

2 个答案: