JQUERY UI에서 "너무 많은 재귀"오류가 발생했습니다.

Jquery UI 아코디언을 프로그래밍 방식으로 변환하려고합니다. 누군가가 다음 버튼을 클릭하면 숨겨진 필드가 추가 된 후 다음 단계로 넘어갑니다. 내가 코드에 쓴 :JQUERY UI에서 "너무 많은 재귀"오류가 발생했습니다.

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Pro Plan Store</title> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
<script> 
$(document).ready(function(){ 

    $("#changeStep").on("click",function(){ 
     $("#step1content").append("<input type='hidden' name='step1done' id='step1done' value=''>"); 

    $('#accordion').accordion('option', 'active', 1); 
    }); 

    var accordian = $("#accordion").accordion({ 
     active: false, 
     beforeActivate: function(event, ui) { 
      var newIndex = $(ui.newHeader).index('h3'); 
      console.log(newIndex);   
      switch(newIndex){ 
       case 0: 
       // $(this).accordion("option", "active", 0); //Main page just set it to homepage again 
       break 
       case 1: 
        if($("#step1done").length > 0){ 
         $(this).accordion("option", "active", 1); //Main page just set it to homepage again 
        } 
        else{ 
         alert("Please login first to choose plan"); 
         event.preventDefault(); 
        } 
       break 
       case 2: 
       break     
      } 

    } 
    }); 



}); 
</script> 
</head> 
<body> 
<div id="accordion"> 
    <h3 id="logmein">Welcome Pro Plan Store</h3> 
     <div id="step1content"> 
      <p> 
      Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer 
      ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit 
      amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut 
      odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. 
      </p> 

      <input type="button" value="Next" id="changeStep" /> 




     </div> 
    <h3 id="chooseplan">Choose Plan</h3> 
    <div id="step2content"> 
     <p> 
      Choose Plan Here 
     </p> 
    </div> 

    <h3 id="zoura">Checkout</h3> 
    <div id="step3content"> 
     <p> 
      Zoura Iframe 
     </p> 

    </div> 

</div> 
</body> 
</html>

을하지만 난 그것을 실행하고 콘솔에서 볼 때 나에게 너무 많은 재귀 오류를 제공합니다. 다음과 같은 오류와 같이

enter image description here

내가 뭔가 잘못하고있는 중이 야? 나는 라이브러리의 모든 안정 버전을 사용하고있다. 나는 또한 아코디언의 머리 요소에 대한 클릭을 에뮬레이션하여 시도했지만 동일한 오류가 발생했습니다.

출처

2013-06-12 Seeker

작성한 코드와 관련이 있습니다. $ (를 사용하여 "패널 선택"을 활성화하려고합니다. '#accordion') 첫 번째 패널에서 다음 버튼을 클릭하면 accordion ('option', 'active', 1)이 표시됩니다.

활성화되기 전에 컨트롤은 beforeActivate 메서드로 이동합니다. 그러나 beforeActivate 메소드에서 동일한 패널을 활성화하려고합니다. 이제 컨트롤은 beforeActivate 메서드를 다시 활성화하고 교착 상태가되기 전에 다시 발생합니다.

왜 beforeActivate 메서드에서 동일한 아코디언을 활성화 하시겠습니까? 이것은 결코 작동하지 않을 것입니다. 걸 레 대답에

출처

2013-06-12 10:49:27 Raghav

덕분에 아이디어를주는 짝을 :) 사실 내 논리가'preforeActivate' 부분에서 완료되지 않은 경우 기본 동작을 방지해야합니다. 그렇지 않으면 아코디언이 기본 작업을 수행하게됩니다. – Seeker

좋아 덕분에 난 그냥 그렇게 내 코드는 다음과 같이 될 것입니다 필요 내 논리에 따라 행동을 preventDafult 할 필요가 내 문제를 발견 할 수 있었다 :

<!doctype html> 
    <html lang="en"> 
    <head> 
    <meta charset="utf-8" /> 
    <title>Pro Plan Store</title> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
    <script> 
    $(document).ready(function(){ 

     $("#changeStep").on("click",function(){ 
      $("#step1content").append("<input type='hidden' name='step1done' id='step1done' value=''>"); 

     $('#accordion').accordion('option', 'active', 1); 
     }); 

     var accordian = $("#accordion").accordion({ 
      active: false, 
      beforeActivate: function(event, ui) { 
       var newIndex = $(ui.newHeader).index('h3'); 
       console.log(newIndex);   
       switch(newIndex){ 
        case 0: 
        // $(this).accordion("option", "active", 0); //Main page just set it to homepage again 
        break 
        case 1: 
         if($("#step1done").length < 0){ 
          alert("Please login first to choose plan"); 
          event.preventDefault(); 
         } 
        break 
        case 2: 
        break     
       } 

     } 
     }); 



    }); 
    </script> 
    </head> 
    <body> 
    <div id="accordion"> 
     <h3 id="logmein">Welcome Pro Plan Store</h3> 
      <div id="step1content"> 
       <p> 
       Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer 
       ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit 
       amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut 
       odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. 
       </p> 

       <input type="button" value="Next" id="changeStep" /> 




      </div> 
     <h3 id="chooseplan">Choose Plan</h3> 
     <div id="step2content"> 
      <p> 
       Choose Plan Here 
      </p> 
     </div> 

     <h3 id="zoura">Checkout</h3> 
     <div id="step3content"> 
      <p> 
       Zoura Iframe 
      </p> 

     </div> 

    </div> 
    </body> 
    </html>

출처

2013-06-12 11:08:46 Seeker

JQUERY UI에서 "너무 많은 재귀"오류가 발생했습니다.

답변

관련 문제