通过 ajax position() 的 jQuery UI 选项卡内容仅在第一个选项卡中工作

Question

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

我面临的问题是，当我单击第一个选项卡时，一切正常。当我单击第二个选项卡时，定位不起作用。我在下面添加了我的代码。

样品.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>

温度.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的一个棘手部分，你需要确保在选项卡之前初始化你的手风琴

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

• 首先尝试取出手风琴，看看是否有帮助。
• 然后尝试在最后初始化您的选项卡。

然后你需要验证用AJAX加载你的html页面将运行它包含的Javascript...如果没有，则需要将该初始化代码粘贴到选项卡的 select 事件中。

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