代码之家 › 专栏 › 技术社区 › Aurovrata

如何在选项卡刷新后加载新创建的(动态)jquery选项卡?

jquery-ui

Aurovrata · 技术社区 · 6 年前

我有一个js函数,它为现有的JQuery UI添加了一个额外的选项卡+面板 tab widget 在点击按钮时,

let $tabs = $('#my-tab').tabs(options);

$button.click(function(e){
  let $newtab = $('#additional-tab'),
    $newpanle = $('#additional-panel'),
    ref = '#'+$newpanel.attr('id');

  $tabs.children('ul').append($newtab);
  $tabs.append($newpanel);
  
  //I would now like to load the newly created tab.
  $tabs.on('tabscreate', function(e,ui){
    $tabs.tabs("load",ref);
  });
  //refresh to enable the new tab/panel.
  $tabs.tabs("refresh");
})

创建了新的选项卡/面板,但我希望在小部件“刷新”后加载它。我试图绑定选项卡小部件触发的所有事件,

$tabs.on('tabsbeforeactivate,tabsbeforeload, tabscreate, tabsload, tabsactivate', function(e,ui){
   $tabs.tabs("load",ref);
 });

但当小部件刷新时,它们都不会被触发。

还有其他方法可以实现这一点吗?

0 回复 | 直到 6 年前

Aurovrata 6 年前

所以经过多次实验,我终于回到了以下解决方案,

$button.click(function(e){
  let $newtab = $('#additional-tab'),
    $newpanle = $('#additional-panel'),
    ref = '#'+$newpanel.attr('id');

  $tabs.children('ul').append($newtab);
  $tabs.append($newpanel);
  
  //refresh to enable the new tab/panel.
  $tabs.tabs("refresh");

  //activate the new tab,
  $('a', $newtab).delay(200).click();
})

这个 delay(200) 确保选项卡(“刷新”)有时间完成。

另一种可能的解决方案是销毁并重新创建选项卡,并将活动选项设置为新选项卡,

$button.click(function(e){
  let $newtab = $('#additional-tab'),
    $newpanle = $('#additional-panel'),
    ref = '#'+$newpanel.attr('id');

  $tabs.children('ul').append($newtab);
  $tabs.append($newpanel);
  
  //refresh to enable the new tab/panel.
  let idx = $tabs.children('ul').children('li').length-1;

  $tabs.tabs("destroy").tabs({active:idx});
})

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Nuñito Calzada · JQuery在spring boot和Thymelaf中从DB自动完成

2 年前

Connor · 使用jquery UI幻灯片制作周围动画

2 年前

provance · 如何获得最新版本的jquery ui?

3 年前

Akhilesh · 当数据目标中有分号或冒号时,带有展开的aria的Button元素不展开

3 年前

chris loughnane · 使用jQuery UI滑块移动和缩放svg元素时遇到问题?

8 年前

Tirkesh Turkesh · 如何在可拖放div中释放项目的精确位置元素上拖放

8 年前

ferralucho · Hightlight jquery datepicker标头选定的星期几

8 年前

Paili · 如何在jQuery自动完成中添加其他内容?

8 年前

monu · 动态嵌套选项卡创建

8 年前