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

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

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

var $tabs = $("#tabs").tabs({ tabTemplate: "
#{label} Remove Tab
", 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看起来像这样

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

Answer 1

尝试加载事件。 一旦加载了远程选项卡的内容，就会触发此事件。

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

Answer 2

它有jquery函数ajaxcomplete（）; google it，希望这有助于$（’＃element’）。ajaxcomplete（function（）{your stuff //}）;