problème avec jQuery appendTo()

Question

J'ai un problème en ajoutant des éléments de liste d'un ul à l'autre. Lorsque chaque élément de la liste est cliqué, il est supposé être ajouté dans un autre ul. Cependant, une fois ces éléments ajoutés, ils continueront à s'ajouter à leur ul ... ce qui signifie qu'ils se classeront au bas de la liste. Par exemple:

<ul class="first-holder"> 
      <li><input type="checkbox" name="location1" /> Location 1</li> 
      <li><input type="checkbox" name="location2" /> Location 2</li> 
      <li><input type="checkbox" name="location3" /> Location 3</li> 
      <li><input type="checkbox" name="location4" /> Location 4</li> 
      <li><input type="checkbox" name="location5" /> Location 5</li> 


      </ul> 


      <div class="more-options first-option"> 
      <ul> 
      <li><input type="checkbox" name="location-6" checked="checked" /> Location 6</li> 
      <li><input type="checkbox" name="location7" checked="checked" /> Location 7</li> 
      <li><input type="checkbox" name="location8" checked="checked" /> Location 8</li> 
      </ul> 
      </div> 

Le jquery:

$('div.more-options li').click(function() { 

       $(this).appendTo($('ul.first-holder')); 
       return false; 

      }); 

Ce qui se passe est la suivante: Les éléments de liste dans les div.more-options ajoutera au support ul.first, mais quand ces articles sont dans ul.premier-titulaire, en cliquant sur eux les fera ajouter à la fin de ul.premier-titulaire. Une fois que les li ont été ajoutés au premier titulaire, ils ne devraient plus bouger nulle part. Je ne peux pas comprendre comment y arriver.

Answer 1

Essayez de supprimer le gestionnaire d'événements de l'élément. Il va juste cesser de recevoir des événements de clic.

$(this).unbind('click'); 
$(this).appendTo($('ul.first-holder')); 

http://api.jquery.com/unbind/

Answer 2

C'est parce que vous déplacez le nœud avec l'événement click attaché. Ainsi, lorsque ce noeud est ajouté à l'autre ul, l'événement click s'applique toujours.

Vous pouvez soit copier le nœud et l'ajouter, soit supprimer l'événement click lors de l'ajout.

Answer 3

Utilisez .delegate() ici au lieu, comme ceci:

$('div.more-options').delegate('li', 'click', function() { 
    $('ul.first-holder').append(this); 
}); 

You can test it out here.

Actuellement vos click gestionnaires sont sur les <li> éléments, et se déplaçant avec eux ... plutôt mettre le gestionnaire click sur lui-même .more-options<div>, donc il n'y a pas de gestionnaire pour se déplacer. Ceci est aussi moins cher d'exécuter si vous avez plus de quelques éléments :)

Answer 4

Vous voulez gérer seul le premier événement click, comme celui-ci:

$('div.more-options li').one('click', function() { ... }):