jquery克隆函數寬度一個addClass嵌套

Question

我有問題到選擇我的選擇當div已被克隆。

一旦克隆我希望能夠選擇選項並給出選定的類。所以每個克隆的div都有e選項。

請檢查我的演示，並嘗試克隆。

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

你可以把它改成這個隻影響該克隆中的元素：

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

---

此外，要重新綁定單擊每個時間使每個元素聽衆的數量增加與每一個克隆，而是使用事件委派：

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

如果你真正的代碼有一個共同家長，用適當的選擇器替換document。

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