Question

我有一个JQuery选项卡的以下html内容：

<div id=tabs >
    <ul>
        <li><a href=#tab1>Tab 1</a></li>
        <li><a href=#tab2>Tab 2</a></li>
    </ul>
    <div id=tab1>Content of Tab1</div>
    <div id=tab2>Content of Tab2</div>
</div>

我通过在我的js中调用以下函数来渲染标签：

function checkerTabs_jqueryui_init(){
    $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
    $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
}

只要我将内容直接放在我的初始jsp页面（不是ajax）中，一切都很好。但如果我通过ajax调用将内容加载到页面中：

$( "#tabs" ).load(
        'fetchTabs', null, checkerTabs_jqueryui_init
    );

它不会将内容呈现为选项卡，就像一个没有应用tabs（）函数的列表一样。 ajax调用返回完全相同的html内容，并且回调函数肯定被调用，但我不明白为什么它没有正确呈现。我错过了什么吗？

Answer 1

我终于弄明白了。问题的根本原因是不止一次调用<div id=tabs>上的tabs（）。每件事都是第一次运作良好。但是当我再次加载div的内容并在div上再次调用tabs（）函数时，它不起作用。我仍然想知道为什么JQuery对此如此感性，但我通过以下方式解决了这个问题：

每次加载<div id=tabs>以及内容。我的意思是通过我的ajax load（）函数将整个div加载到<td>标记中，该函数实际上重置了在div上应用的css类的状态。

所以jquery每次都像第一次一样。可能如果你在调用tabs（）之前删除了应用于<div id=tabs>的所有类，它也可以正常工作。

当我通过Ajax加载内容时，JQuery UI选项卡无法正确呈现

1 个答案: