页面加载后加载jQuery ui-tabs

Question

我需要在 DOM加载后创建一些标签。我使用jQuery的追加创建必要的标记，然后创建选项卡，但它们不起作用。应用样式，显示选项卡，但所有选项卡内容都会立即显示，而选项卡在单击时不执行任何操作。选项卡是否必须以某种特定方式初始化？

以下是代码：

$(".edit-element").livequery(function() {
      $(".edit-element").click(
              function() {

                  //alert("Clicked");
                var id=$(this).parent().attr('id');
                 $(this).parent().append("<div id=\""+id+"_tabs\"><ul>
<li><a href=\""+id+"_tab0\">Nunc tincidunt</a></li>
<li><a href=\""+id+"_tab1\">Nunc tincidunt</a></li></ul>
<div id=\""+id+"_tab0\">Proin elit</div>
<div id=\""+id+"_tab1\">Proin elit arcu, rutrum commodo</div></div>");
$(this).remove();
$("#"+id+"_tabs").tabs();       
              }
           );

    });

livequery()就在那里，因为我正在通过Ajax远程加载这些元素。

Answer 1

我自己找到了答案。

我在链接中忘记了#符号。所以，而不是

<li><a href=\""+id+"_tab0\">Nunc tincidunt</a></li>

应该是

<li><a href=\"#"+id+"_tab0\">Nunc tincidunt</a></li>

就这么简单。

感谢所有提供帮助的人！

Answer 2

您的标签可能不起作用，因为您将id设置为该页面上已存在的标签。页面上的ID应始终是唯一的（即，您不能在同一页面上使用相同的ID）

您的以下两个代码行表明您正在为选项卡指定与其父级相同的ID，因此单击时可能无法按预期工作。

 var id=$(this).parent().attr('id');
 $(this).parent().append("<div id=\""+id+"_tabs\"><ul>