Question

我想应用jQuery tabs做一个动态加载的内容。问题是在加载容器之前应用tabs函数，因此我看不到渲染的选项卡。调试我不能等待一段时间，它可以成功运行。

我的背景是主/细节网格，将细节显示为可展开的行。每次我点击网格行时，我都会通过ajax向另一个名为mypage.aspx的页面询问详细信息，并将收到的数据放到名为div的{{1}}中，这实际上是动态生成的contentDetail { {1}}。获得数据后，我想在mypage.aspx内容上应用tr函数。

这是我的代码：

tabs

更新

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();
        });

    });

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

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();
}

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

3 个答案: