페이지로드시 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"); 
    }); 
});

당신이 당신의 addTag 기능을 트리거하는 방법이 될 수 있다면이있는이 jsfiddle 메신저 확실하지 않은 작업이 나타납니다 다음 만든하지만이 문제는 당신이를 놓친 수 있습니다

출처

2013-07-09 12:16:55 SCraft

ID로 선택하면 그런 식으로해야하지만 공식적으로 두 가지 방법 모두 작동하며 그 원인이 분명하지 않습니다. OPs 오류. –

콘솔에서 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 탭이 작동하지 않음

답변

관련 문제