Jquery选项卡重新添加答案

【问题标题】：Jquery tab re-additionJquery选项卡重新添加
【发布时间】：2011-09-13 21:48:49
【问题描述】：

我正在尝试在 Jquery 选项卡中添加撤消/重做功能。我能够为添加/删除的标签存储和恢复 li/div。

问题是当我将选项卡重新添加到表单时，尽管它被正确添加，因为该特定选项卡的 li 和 div 存在并且可以看到。但是，如果我单击该选项卡，则不会触发“tabsselect”事件。选项卡的 Li 和 div 按顺序查找。但我无法弄清楚缺少什么。

在我的网站中，我正在动态添加和删除标签，它工作正常，但只是读取一旦删除的标签就不起作用

这是添加标签的代码

 var $tabs = $("#tabs").tabs({
                    tabTemplate: "<li><a href='#{href}'>#{label}</a> <span id='id1' class='ui-icon ui-icon-close'>Remove Tab</span></li>",
                    add: function (event, ui) {
                        var tab_content = $tab_content_input.val(); // || "Tab " + tab_counter + " content.";

                    }
                });

这里是删除代码

$("#tabs span.ui-icon-close").live("click", function () {
                    if (imode == 1) {
                        var index = $("li", $tabs).index($(this).parent());
                        if ($tabs.tabs("length") > 1) {
                           $tabs.tabs("remove", index);
                           }
                    }
                });

真的没有什么特别的。寻找答案。谢谢

【问题讨论】：

标签： jquery-ui jquery-selectors

【解决方案1】：

试试这段代码，它会给你一个很好的例子来使用 jquery 操作标签中的数据。

JavaScript

  $(document).ready(function(){   
var $tabs = $('#tabs').tabs();

var $a = $('<a />').appendTo('body').attr('href','#').html('add new tab').click(function(){
  var n = parseInt($tabs.tabs( "length" ),10)+1;
      $('body').append('<div id="tabs-'+n+'">content for the tab # '+ n +'</div>');

        $tabs.tabs("add",'#tabs-'+n,'Tab #'+n);
  return false;

});

    $('<a/>').html('<br><br>remove tab').attr('href','#').click(function(){

      $tabs.tabs('remove',$tabs.tabs('length')-1);
      return false;
    }).appendTo('body');

  });

HTML

<!DOCTYPE html>
<html>
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"></link>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <div id="tabs">
   <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>
      <li><a href="#tabs-3">Aenean lacinia</a></li>
   </ul>
   <div id="tabs-1">
      <p>Tab 1 content</p>
   </div>
   <div id="tabs-2">
      <p>Tab 2 content</p>
   </div>
   <div id="tabs-3">
      <p>Tab 3 content</p>
   </div>
</div>
</body>
</html>

* 只需使用所选选项卡的 id 并操作其中的数据。这将允许在您的页面上添加和删除标签 *

选项卡选择功能

$('.ui-tabs-nav').bind('tabsselect', function(event, ui) {
     ui.options // options used to intialize this widget
     ui.tab // anchor element of the selected (clicked) tab
     ui.panel // element, that contains the contents of the selected (clicked) tab
     ui.index // zero-based index of the selected (clicked) tab
 });

使用 ui.index 获取所选标签的索引，然后添加然后操作所选标签。

【讨论】：

感谢您的回复 Rishabh，但我可以动态添加/删除标签。即使撤消/重做工作正常。我的问题是 tabsselect 没有因为 readded 选项卡而被解雇。所以我无法选择该选项卡。一旦我保存该页面并重新加载它。它开始正确选择选项卡。
添加了 tabsselect 功能。看看
此外，如果您发现问题的答案很有用，您应该接受它们的答案（请参阅那里有一个勾号）并使用upvotes。它将帮助您获得更多答案。
Rishabh 谢谢，但不是我正在寻找的答案。我的具体查询是为什么在我读取的选项卡（使用我实现的 UndoManager）上 tabsselect 事件没有触发并且我无法选择那个特定的选项卡。 :(
@neena 只需查看我在上面发送的代码，它肯定会解决您的标签删除问题