jQuery UI通过ajax位置标签（）的内容仅适用于第一个标签

Question

我是jQuery/jQuery UI的新手。我试图在页面（sample.html）中创建多个标签，它通过ajax加载动态内容（temp.html）。期望的效果是temp.html中的内容应根据所选标签进行更改。我正在使用position将一些小部件放置在相对于彼此的位置。

我面临的问题是，当我点击第一个标签，一切工作正常。当我点击第二个标签定位不起作用。我在下面添加了我的代码。

Sample.html

$(function() { 
    $("#tabs").tabs({ 
    ajaxOptions : { 
     error : function(xhr, status, index, anchor) { 
      $(anchor.hash).html("Couldn't load this tab."); 
     }, 
     cache : false 
     } 
    }); 
}); 

<div id="content" class="content"> 
    <div id="tabs"> 
    <ul> 
     <li><a href="temp.html">Tab 1</a></li> 
     <li><a href="temp.html">Tab 2</a></li> 
    </ul> 
    </div> 
</div> 

temp.html

#widget1 { 
width: 150px; 
height: 70px; 
top: 20px; 
left: 50px 
} 

#widget2 { 
width: 150px; 
height: 70px; 
} 

function resetPositions() { 
    $("#widget2").position({ 
    my : "left top", 
    at : "right bottom", 
    of : "#widget1", 
    offset : "0 50" 
    }); 
    } 
$(function() { 
    $(".customAccordion").draggable(); 
    $(".customAccordion").accordion({ 
    collapsible : true, 
    fillSpace : false, 
    icons : { 
    header : "ui-icon-circle-arrow-e", 
    headerSelected : "ui-icon-circle-arrow-s" 
    } 
}); 
resetPositions(); 
}); 

<div id="widget1" class="customAccordion"> 
    <h3><a href="#">Widget 1</a></h3> 
    <div>Widget 1</div> 
</div> 
<div id="widget2" class="customAccordion"> 
<h3><a href="#">Widget 2</a></h3> 
<div>Widget 2</div> 
</div> 

请不要让我知道，如果我犯错误。

Answer 1

可能的jQuery UI的一个棘手的部分，你需要确保你初始化手风琴（S）之前你的标签

$(".customAccordion").accordion(); 
$("#tabs").tabs(); 

• 首先尝试删除你的手风琴，看它是否帮助。
• 然后尝试在最后初始化您的选项卡。

然后，你需要验证与AJAX加载HTML页会运行其包含的JavaScript ...如果没有，您需要贴在初始化代码到选择标签页事件。

$("#tabs").tabs(
{ 
    select: function(event,ui) 
    { 
     // initAccordions(); 
    } 
});