Jquery UI - 創建重複的DOM元素，然後添加和刪除類

我正在使用一個小部件，在汽車行業稱爲壓扁的青蛙。它基本上是一個扁平的汽車圖像顯示的損壞所在的圖標。我有一個HTML圖像圖標列表，當用戶點擊時我想要被複制，因此這個HTML圖標的副本將被放置在一個容器div中，然後它可以被拖動到汽車圖像上的位置損壞位於。Jquery UI - 創建重複的DOM元素，然後添加和刪除類

一旦副本已經創建，是父容器DIV的孩子，我想補充類「拖動」，因此可以拖動，然後刪除類「青蛙鍵」所以它不會在單擊時創建此副本的另一個副本。

問題IM掙扎一旦元素被點擊刪除「青蛙鍵」類...

這裏是我的代碼...

<!-- Script --> 
<script type="text/javascript"> 

    $(function() { 
     $(".draggable").draggable(); 
    }); 

    $(document).ready(function() { 

     // when an element is clicked, a duplicate is created that can be dragged. 
     // where it is placed is where the coordinates will be saved 

     $(".frog-key").click(function() { 

      var copy = $(this).clone(true); 

      // add a unique ID 
      copy.attr("id", copy.attr("data-type") + "-1"); 

      // remove class frog-key as we dont want a duplicate of this copy 
      copy.removeClass("frog-key"); 

      // add the class draggable - so it can be dragged - jquery UI 
      copy.addClass("draggable"); 

      // add this copy to the container div 
      $("#squashed-frog-container").append(copy); 

     }); 

    }) 
</script>

HTML

<div id="squashed-frog" class="large"> 
<div id="squashed-frog-container"> 
    <img id="squashed-frog-art" src="/Content/Design/img/ART_squashed_frog_large.png"> 
</div> 
<ul class="unstyled" id="squashed-frog-key"> 
    <li><span class="pointer sprite frog-key dent" data-type="Dent_Bodyshop"></span>Dent <small>(Bodyshop)</small></li> 
    <li><span class="pointer sprite frog-key dent-repair" data-type="Dent_SmartRepair"></span>Dent <small>(Smart Repair)</small></li> 
    <li><span class="pointer sprite frog-key scratch" data-type="Scratch_Bodyshop"></span>Scratch <small>(Bodyshop)</small></li> 
    <li><span class="pointer sprite frog-key scratch-repair" data-type="Scratch_SmartRepair"></span>Scratch <small>(Smart Repair)</small></li> 
    <li><span class="pointer sprite frog-key chip" data-type="Scratch_Chip"></span>Chip</li> 
    <li><span class="pointer sprite frog-key multi-chip" data-type="Multiple_Chips"></span>Multiple Chips</li> 
    <li><span class="pointer sprite frog-key paint" data-type="Paint_OffColour"></span>Paint <small>(Off Colour)</small></li> 
    <li><span class="pointer sprite frog-key paint-repair" data-type="Paint_PreviousRepair"></span>Paint <small>(Previous Repair)</small></li> 
    <li><span class="pointer sprite frog-key paint-fallout" data-type="Paint_Fallout"></span>Paint <small>(Fallout)</small></li> 
    <li><span class="pointer sprite frog-key rust" data-type="Rust"></span>Rust</li> 
    <li><span class="pointer sprite frog-key wheel-Scuff" data-type="Wheel_Scuff"></span>Wheel Scuff</li> 
    <li><span class="pointer sprite frog-key sidewall" data-type="Sidewall_Damage"></span>Sidewall Damage</li> 
    <li><span class="pointer sprite frog-key broken" data-type="Broken"></span>Broken</li> 
</ul>

來源

2013-04-09 JGilmartin

您只是缺少一個線（加上我不得不重新初始化Click事件中拖動 - 但這可能是小提琴的錯）：

copy.unbind("click"); 
$(".draggable").draggable();

當你克隆的元素，它保留了它的Click事件。 .frog-key實際上是按計劃移除的，但不會每次都評估;一旦加載頁面，事件就會附加到元素及其克隆上，並保持這種狀態直到特別解除綁定。

我希望這會有所幫助。

來源

2013-04-09 16:25:39

Jquery UI - 創建重複的DOM元素，然後添加和刪除類

回答

相關問題