jquery - 如何在使用 JQuery 应用函数之前等待元素加载

Question

我想应用一个 jQuery tabs做一个动态加载的内容。问题是该tabs函数是在容器加载之前应用的，所以我看不到渲染的选项卡。调试我等不及了，它成功了。

我的背景是一个主/细节网格，将细节显示为可扩展的行。每次单击网格行时，我都会通过 ajax 向另一个名为的页面询问详细信息，mypage.aspx然后将接收到的数据放入一个实际上是动态生成的div命名的. 获得数据后，我想在 mypage.aspx 内容上应用该函数。contentDetailtrtabs

这是我的代码：

var html = '<tr id="newRow"><td colspan="4"><div id="contentDetail"></div></td></tr>';

$('#mygrid tr').each(function () {
    $(this).on('click', function () {
        // I create a row on the fly and append it next to the clicked row
        // ...
        // I load the contents
        $('#contentDetail').load('mypage.aspx #div1', { data: '123' }, function (response, status, xhr) {
            if (status == "error") {
               // ERROR
            }
        });
        // Here I want to apply the tabs
        $('#contentDetail').ready(function () {
            $('.tabs').tabs();
        });

    });

更新：

$.when($('#contentDetail').load('mypage.aspx #div1', { data: '123' }, function (response, status, xhr) {
            if (status == "error") {
               // ERROR
            }
        })).then($.getScript('Scripts/function.js'));

函数.js： $('#tabs').tabs();

Answer 1

试试这个：

    var html = '<tr id="newRow"><td colspan="4"><div id="contentDetail"></div></td></tr>';

   $('#mygrid tr').each(function () {
    $(this).on('click', function () {
        // I create a row on the fly and append it next to the clicked row
        // ...
        // I load the contents
        $('#contentDetail').load('mypage.aspx #div1', { data: '123' }, function (response, status, xhr) {
            if (status == "error") {
               // ERROR
            }
             if(status == "success"){
              // Here I want to apply the tabs

            $('.tabs').tabs();

              }

        });


    });
});

Answer 2

你可以使用jQuery when / Deferred来做到这一点：

$.when($('#contentDetail').load('mypage.aspx #div1')).then($('.tabs').tabs());

Answer 3

我使用回调函数的else子句解决了它：load

if (status == "error") {
    // Error
}
else {
   // HERE THE CONTENT IS FULLY LOADED
   $('#tabs').tabs();
}