jQuery appendTo (commutation d'avant en arrière)

Question

Donc ce que j'essaie d'accomplir est un appendice simple à un certain élément. La question que je vais avoir est d'exécuter après est exécuté, il ajoute à l'emplacement, mais procéder ensuite à revenir à la ul il réside.

<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

Modifier la configuration du gestionnaire d'événements comme celui-ci:

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

Mieux encore, mettre en place avec jQuery et que le gestionnaire return false:

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

Vous auriez à donner votre <a> une "id" value ("theAnchorTag" dans mon exemple), ou vous pouvez l'identifier d'une autre manière dans le sélecteur où le gestionnaire "click" est configuré. Il vaut mieux utiliser jQuery pour lier les gestionnaires d'événements; ces attributs "onfoo" sont plutôt icky.

Answer 2

Vous devez retourner faux d'exécuter pour empêcher l'événement bouillonnant.

Answer 3

Le problème est qu'un href vide (comme cela est le cas avec votre lien) va recharger la page lorsque vous cliquez dessus ..

Vous réorganisez vos li éléments et la page est rechargée tout revenir en arrière à la façon dont ils étaient à l'origine ..

Comme mentionné dans les autres réponses dont vous avez besoin pour annuler l'action de clic par défaut en retournant false de votre gestionnaire ..

vous devriez également regarder d'attribuer le gestionnaire avec jquery au lieu des attributs en ligne ..