jQuery技术:如何在将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文件加载完成后。 在内容完全加载后,如何让内容淡入?

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

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

      它有jquery函数ajaxcomplete(); google it,希望这有助于$(’#element’)。ajaxcomplete(function(){your stuff //});

        以上就是jQuery教程分享如何在将ajax内容加载到新添加的jquery ui选项卡后执行回调函数相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。

        本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。

        ctvol管理联系方式QQ:251552304

        本文章地址:https://www.ctvol.com/jquerytutorial/561832.html

        (0)
        上一篇 2021年2月4日
        下一篇 2021年2月4日

        精彩推荐