页面加载后 jQuery UI 选项卡不起作用

Question

我在页面加载时设置了标签，它们运行良好。但是，当我尝试动态添加更多选项卡时，出现错误

TypeError: Object [object Object] 没有方法'tabs'

这意味着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()”导致错误。任何帮助将不胜感激。提前谢谢你。

Answer 1

问题可能是您错过了右括号。以下代码完美运行：

<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。

Answer 2

$(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 功能的方式，但我希望这会有所帮助