javascript - 双击jQuery克隆div并单击更改样式

Question

我想克隆selected div。单击它应该给单击的 div 一个边框。双击它应该克隆那个 div。

当我单击它时，它不会为选定的 div 提供边框轮廓。双击它应该克隆那个 div，就是这样。

我的 jsfiddle :

    $(document).ready(function(){
    
    
        $("div").on('click', function(){
                alert("clicked Div is cloned!!!");
            });
            
            $(div).addClass("selected"); 
            
            $(document).on("mouseup", function() {
  $(".selected").removeClass("selected");
});
    });

.selected {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div  class="col-lg-6 col-md-6 col-sm-12">
  
  <div class="col-md-12 context_image">
  <img src="http://pngimg.com/uploads/ferrari/ferrari_PNG10680.png" class="imgsen-117 sim-row-edit">
  </div>
  
  <div contenteditable="true" class="col-md-12 smalltxt20-l">Why is building with Variant so darn fun and dead-easy?
  </div>
  
  <div contenteditable="true" class="col-md-12 smalltxt">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.
  </div>
  
  <div class="col-md-12 smalltxt context_menu context_link"><a href="http://google.com" target="_blank" class="btntst-b">LEARN MORE</a>
  </div>
  
  </div>

我宁愿不给 div 任何类，因为我的代码中有很多类。

Answer 1

试试这个 jquery 代码:

$(document).ready(function(){       
    $(document).on('click', "div", function(e){
        e.preventDefault();
        console.log("clicked Div is cloned!!!");
        $("div.selected").removeClass('selected');
        $(this).addClass('selected');
        return false;
    });

    $( "div" ).dblclick(function() {
        if($(this).hasClass('selected')) {
            var clonned = $(this).clone();
            clonned.removeClass('selected');
            clonned.insertAfter($(this));
        }
    });
});