jQuery appendTo (앞뒤로 전환)

Question

그래서 내가 이루고자하는 것은 단순한 appendTo 특정 요소입니다. 나는 이후 실행되는 데 문제는 위치를 추가하지만이 상주하는 UL로 돌아갈 진행, 실행됩니다.

<script type="text/javascript"> 
    function execute() { 
     $('#desCopy').appendTo('#description') 
     $('#imgPlace').appendTo('#IMGbox') 
    } 
</script> 

<div id="content" style="background:#000; width:989px;"> 
    <div style="float:left; left:18px; margin:0; width:337px; position:relative; padding:15px 0 0 0; color:#FFF;"> 
     <div id="description"> 
     </div> 
    </div> 

    <div 
     id="IMGbox" 
     style="float:left; position:relative; display:block; background:#F00; width:652px; height:258px; background:#0FF; overflow:hidden;"> 
    </div> 

    <div style="float:right; background:#CCC; height:25px; width:652px;"> 
     <ul> 
      <li><a href="" onclick="execute()">Slide 1</a> 
       <ul style=""> 
        <li><span id="desCopy">Test description, Test description</span></li> 
        <li><img src="images/test.jpg" id="imgPlace"></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</div> 

Answer 1

는 변경이 같은 이벤트 핸들러 설정 :

<a href="" onclick="execute(); return false"> 

더 나은 아직, jQuery를 함께 설정하고 핸들러가 false를 반환해야 :

// somewhere in your initialization code: 
$(function() { 
    $('#theAnchorTag').click(function() { 
    $('#desCopy').appendTo('#description'); 
    $('#imgPlace').appendTo('#IMGbox'); 
    return false; 
    }); 
}); 

당신은 당신의 <a>를 제공해야 할 것 "id"값 (예제에서는 "theAnchorTag")을 사용하거나 "click"핸들러가 설정된 selector에서 다른 방법으로 식별 할 수 있습니다. jQuery를 사용하여 이벤트 핸들러를 바인딩하는 것이 훨씬 낫다. 그 "onfoo"속성은 꽤 칙칙합니다.

Answer 2

당신은 이벤트가 버블 링 방지하기 위해 실행에서 false를 반환해야합니다.

Answer 3

문제는 빈 HREF (귀하의 링크의 경우와 같이)를 클릭하면 페이지를 다시로드합니다 ..이

그래서 당신은 당신의 li 요소를 재 배열하고 페이지가 어떻게 다시 모든 것을 되 돌리는 다시로드됩니다 것입니다 그들은 원래했다 .. 당신은 당신의 핸들러에서 false를 반환하여 기본 클릭 작업을 취소하는 데 필요한 다른 답변에서 언급 한 바와 같이

..

또한 jQuery로 핸들러를 할당하는 대신 인라인 속성에 보일 것입니다 ..