jQuery UI选项卡不工作一旦页面加载

我有页面加载标签设置，他们完美的工作。然而，当我尝试动态地添加更多的标签，我得到一个错误jQuery UI选项卡不工作一旦页面加载

类型错误：对象的翻译：已经没有方法“标签”

这意味着，jQuery UI的突然消失？这是我的代码

<script src="//code.jquery.com/jquery-1.7.2.js"></script> 
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
<script> 
    $(document).ready(function(e) { 
    $('#tabs').tabs(); 
}); 
function addTab(){ 
$('#tabs ul').append('<li><a href="#haha">HaHaHa</a></li>'); 
$('#tabs').append('<div id="haha">This is the new tab</div>'); 
$("div#tabs").tabs("refresh"); 
</script> 
<body> 
    <div id="tabs"> 
    <ul> 
    <li><a href="#tabs-1">Nunc tincidunt</a></li> 
    </ul> 
    <div id="tabs-1"> 
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu.  Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> 
    </div> 

</div> 
</body>

函数“addTab（）”会导致错误。任何帮助将不胜感激。先谢谢你。

来源

2013-07-09 Jabran Saeed

你会得到什么错误？为什么不关闭addTab函数？ –

你在哪里调用'addTab（）'？ – cfs

从哪里调用'addTab（）'？ –

-1

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

    $('#addTag').click(function addTab(){ 
    $('#tabs ul').append('<li><a href="#haha">HaHaHa</a></li>'); 
    $('#tabs').append('<div id="haha">This is the new tab</div>'); 
    $("div#tabs").tabs("refresh"); 
    }); 
});

我已经创造了一种似乎工作jsfiddle林不知道以下，如果它可能是你如何触发您的addTag功能，但我希望这有助于

来源

2013-07-09 12:16:55 SCraft

你是对的，选择ID应该这样做，但在形式上这两种方式将起作用，这当然不是原因的OP错误。 –

我从控制台触发addTab（）函数，缺少的括号不是问题。它适用于jsfiddle，而不是在我的机器上。我认为这与其他一些干扰jQuery UI的脚本有关。也许。仍然没有好处。 –

你还在运行什么其他脚本？如果您将JSFiddle代码直接发送到您的计算机，会发生什么情况？ – SCraft

的问题可能是你错过了右括号。下面的代码完美地工作：

<html> 
    <head> 
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/ui-lightness/jquery-ui.min.css" /> 

     <script src="http://code.jquery.com/jquery-1.7.2.js"></script> 
     <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
     <script> 
      $(document).ready(function(e) { 
       $('#tabs').tabs(); 
      }); 

      function addTab(){ 
       $('#tabs ul').append('<li><a href="#haha">HaHaHa</a></li>'); 
       $('#tabs').append('<div id="haha">This is the new tab</div>'); 
       $("div#tabs").tabs("refresh"); 
      } 
     </script> 
    </head> 
    <body> 
     <a href="#" onclick="addTab();">add tab</a> 

     <div id="tabs"> 
      <ul> 
       <li><a href="#tabs-1">Nunc tincidunt</a></li> 
       <li><a href="#tabs-2">xxNunc tincidunt</a></li> 
      </ul> 
      <div id="tabs-1"> 
       <p> 
        Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu.  Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus. 
       </p> 
      </div> 
      <div id="tabs-2"> 
       <p> 
        yyProin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu.  Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus. 
       </p> 
      </div> 
     </div> 
    </body> 
</html>

更新：添加“添加选项卡”链接和CSS。

来源

2013-07-09 12:19:18 piotrb

这不起作用。这是我的代码。刚刚添加了一个标签来触发addTab（） –

@JabranSaeed，你有没有试过这个？适用于FF20，Chrome 27和IE9。我添加了链接和CSS，现在您可以将代码复制并粘贴到记事本并试用。如果仍然无法使用，则需要提供更多详细信息。 – piotrb

jQuery UI选项卡不工作一旦页面加载

回答

相关问题