双击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));
        }
    });
});

Answer 2

试试这个小提琴

$(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

尝试这样的事情。

如果您希望对 div 的任何点击也将点击注册到包装 div，则可以删除e.stopPropagation()语句。

 $(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>