Ajax调用后jQuery UI选项卡无法正常工作

Question

我的地图上有几个标记。单击标记时，有关该特定标记的信息将加载到信息框中。加载的信息分为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填写新选项卡时需要重置。

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