jquery의 아코디언 위젯에 요소 추가

jquery-ui 아코디언 위젯이 잘 작동하는 프로젝트 부품 목록이 있습니다 (정렬도 가능함). 그러나 사용자는 html 입력 요소를 사용하여 프로젝트 부분을 추가 할 수 있습니다.jquery의 아코디언 위젯에 요소 추가

새 요소를 아코디언 위젯 앞에 추가하고 싶습니다.

내 접근 방식은 다음과 같습니다. 아코디언 및 정렬 가능한 위젯을 삭제 한 다음 위젯의 첫 번째 요소를 복제하고 복제 된 요소 앞에 추가하여 새 요소가 첫 번째가되도록합니다. 그 후 위젯을 다시 아코디언으로 만들 수 있습니다.

위젯은 다시 생성되지만 추가 된 요소는 포함되지 않습니다! 왜 내가 ... 표시되지 않습니다

HTML을 위젯으로 변환되는 :

<div id="accordion"> 
     <div> 
      <h3><a href="#">Part</a></h3> 
      <div> 
       Some explaining text 
      </div> 
     </div> 
    </div>

또한 첫 번째로드에서 아코디언을하고 자바 스크립트/JQuery와는 정렬 및 아코디언 작업을한다 함께 좋은 (정지 기능)

var stop = false; 
$('#accordion h3').click(function(e) { 
    if (stop) { 
     e.stopImmediatePropagation(); 
     e.preventDefault(); 
     stop = false; 
    } 
}); 
$('#accordion') 
    .accordion({ 
     header: '> div > h3', 
     fillSpace: true 
    }) 
    .sortable({ 
     axis: 'y', 
     handle: 'h3', 
     stop: function() { 
      stop = true; 
    } 
});

자바 스크립트 위젯에 요소를 앞에 추가하고 위젯 재현 클론 :

$('#accordion').accordion("destroy").sortable("destroy"); 
$("#accordion > div:first").clone().prependTo("#accordion > div:first"); 
$('#accordion') 
    .accordion({ 
     header: '> div > h3', 
     fillSpace: true 
    }) 
    .sortable({ 
     axis: 'y', 
     handle: 'h3', 
     stop: function() { 
      stop = true; 
     } 
    });

을

출처

2011-10-19 netiul

좋아, 때로는 해결책이 매우 분명 할 수 있습니다. 문제는 prependTo() 함수를 사용하여 거짓말을했다. 다음과 같아야합니다 : insertBefore()/Solved

출처

2011-10-27 14:19:01 netiul

jquery의 아코디언 위젯에 요소 추가

답변

관련 문제