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函数，但我希望这会有所帮助

页面加载后，jQuery UI选项卡无法正常工作

2 个答案: