jQuery clone div on double click and change style on single click

Question

I want to clone selected div. On single click it should give a border to clicked div. On double click it should clone that div.

When I click it is not giving border outline to the selected div. On double click it should clone that div, that's all.

My 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>

I would rather not give any class to div's as I have many of them in my code.

Answer 1

Try this jquery code:

$(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));
        }
    });
});

Answer 2

try this fiddle

$(document).ready(function(){


    $(".col-lg-6.col-md-6.col-sm-12").children('div').on('click', function(){
                    $('.selected').removeClass("selected"); 
            $(this).addClass("selected"); 
        });
    $(".col-lg-6.col-md-6.col-sm-12").children('div').on('dblclick', function(){
                let clone = $(this).clone();
          $(this).after(clone);
        });


});

Answer 3

Try something like that.

You can remove the e.stopPropagation() statement if you want any click to a div also register click to wrapping divs.

 $(document).ready(function() { $(document).on('click', 'div', function(e) { $(this).addClass('selected'); e.stopPropagation(); }); $(document).on('dblclick', 'div', function(e) { $(this).clone().insertAfter($(this)); e.stopPropagation(); }); });

 .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>