jquery clone fonction largeur une addClass imbriquée

Question

J'ai un problème à sélectionnez mon option lorsque la div a été clonée. Une fois cloné, je veux être en mesure de sélectionner les options et donner une classe sélectionnée. Donc, chaque div cloné a l'option sélectionnée.

Veuillez vérifier ma démo et essayer de cloner.

http://jsfiddle.net/XeELs/60/

Jquery

var cloneCount = 0; 
$("#add-address").click(function() { 

    $("#to-add-address").clone() 
     .attr("id", "to-add-address_Clone" + cloneCount) 
     .insertAfter("#to-add-address"); 
    $("#clone", "#to-add-address_Clone" + cloneCount) 
     .attr("id", "clone_Clone" + cloneCount); 
    cloneCount++; 

    $('.options li a').bind('click',function() { 
      $('.options li a').removeClass('selected'); 
      $(this).addClass('selected'); 
     }); 

}); 

HTML

<ul>  
    <li id="to-add-address" class="outerDiv address" > 
     <div id="clone"> 
      <label><input type="text" value="Address"><span class="input-edit"></span></label> 
      <label><input type="text" value="Address 2"><span class="input-edit"></span></label> 
      <label><input type="text" value="Town"><span class="input-edit"></span></label> 
      <label><input type="text" value="Contry"><span class="input-edit"></span></label> 
      <label><input type="text" value="Post Code"><span class="input-edit"></span></label> 

      <ul class="options"> 
       <li class="home"><a href="javascript:void(0);">home</a></li> 
       <li class="work"><a href="javascript:void(0);">work</a></li> 
       <li class="other"><a href="javascript:void(0);">other</a></li> 
       <li class="delete"><a href="javascript:void(0);">delete</a></li> 
      </ul> 
     </div> 
    </li> 
</ul> 


<a href="javascript:void(0);" id="add-address">clone</a> 

Answer 1

Vous pouvez changer à cela seulement affecter les éléments dans ce clone: ​​

$(this).closest(".options").find('li a').removeClass('selected'); 

---

De plus, vous réappairant cliquez provoquant chaque fois le nombre d'auditeurs sur chaque élément pour augmenter avec chaque clone, utilisez plutôt la délégation de l'événement:

$(document).on("click", '.options li a',function() { 
     var $this = $(this); 
     $this.closest(".options").find('li a').removeClass('selected'); 
     $this.addClass('selected'); 
    }); 

si votre code réel a parent commun, remplacez document par le sélecteur approprié.

http://jsfiddle.net/XeELs/61/