Ajax 调用后 jQuery UI 选项卡不工作

Question

我有一张 map ，上面有一些标记。单击标记时，有关该特定标记的信息将加载到信息框中。加载的信息分为3类，即信息、文档和财务。

为了方便浏览这 3 个类别，我使用 jQuery UI 选项卡在类别之间切换。信息框中的所有内容都是使用 jQuery 构建的。原因是信息框可以包含任何类型的信息，而不仅仅是在单击这些标记之一时才填充。

为了填充此信息框，我使用 Ajax。在 ajax 调用之后，我进行 jQuery 选项卡调用。当您第一次单击标记并填充该框时，它可以正常工作。然而，第二次时，它没有做任何事情。它只是显示我的项目符号列表。

这是我的代码:

function getinfo(id) {
    $.ajax({
        url: "view/"+id,
        type: "post",
        beforeSend: function() {
            $('#info').html("<img src='../img/loading.gif' style='padding:20px'/>");
            $('#info').css('text-align','center');
        },
        success: function(data) {
            $('#info').css('text-align','left');
            data = JSON.parse(data);
            var tabs = $('<ul></ul>').append(
                $('<li></li>').append($('<a></a>').attr('href','#information').text('Information'))).append(
                $('<li></li>').append($('<a></a>').attr('href','#documents').text('Documents'))).append(
                $('<li></li>').append($('<a></a>').attr('href','#financial').text('Financial'))
            );

            var information = $('<table></table>').attr({
                cellpadding : 0,
                cellspacing : 0,
                width       : '298px',
                id          : 'information'
            });
            var documents = $('<table></table>').attr({
                cellpadding : 0,
                cellspacing : 0,
                width       : '298px',
                id          : 'documents'
            });
            var financial = $('<table></table>').attr({
                cellpadding : 0,
                cellspacing : 0,
                width       : '298px',
                id          : 'financial'
            });

            $.each(data.Clinic,function(index, value) {
                if(index == 'street_address') value = value.replace(/UNAVAILABLE,/g, "").replace(/,/g, "<br/>");
                if(index == 'id') return true;
                var row = $('<tr></tr>');
                row.append($('<td></td>').html('<b>' + index.ucwords() + '</b>')).append($('<td></td>').html(value));
                information.append(row);
            });

            if(data.doccount > 0) {
                var row = $('<tr></tr>');
                $.each(data.docs,function(index,value) {
                    var divClass = fileObject[value.ext] != 'image' ? 'document-show infoimage' : 'document-show';
                    row = $('<tr></tr>').append(
                        $('<td></td>').append(
                            $('<img>').attr('src','../img/icon/file_extension_' + value.ext + '.png')
                        ).append(
                            $('<a></a>').attr('href','Documents/' + value.real).addClass(divClass).text(value.name)
                        )
                    );
                    documents.append(row);
                });
            }
            financial.append(
                $('<tr></tr>').append(
                    $('<td></td>').append(
                        $('<a></a>').attr(
                            'href','../clinics/profile/'+data.view.id
                        ).html(
                            'View Financial Data'
                        )
                    )
                )
            );

            $('#info').html(tabs).append(information).append(documents).append(financial);
        },
        complete : function(e){
            $('#info').tabs();
        }
    });
}

这就是结果:

第一次通话后 -

如果我点击另一个标记 -

Answer 1

当您使用新的 html 填充 #info div 时，您不会重置属于 div 的数据属性。这些数据属性存储选项卡的状态，当您将新选项卡填充为 html 时需要重置。

您可以使用jquery-ui-tabs的destroy方法或refresh方法。 (请参阅 destroy 和 refresh 的文档。)