Question

简要说明：我要克隆selected div。在单击时，应给边框以单击div。双击，它应该克隆该div。

当我单击它时，没有为选定的div赋予边框轮廓。双击它应该克隆那个div，就是全部。

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

尝试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

尝试类似的事情。

如果您希望对div进行任何点击，也可以将click注册为环绕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>

双击jquery克隆div并单击更改样式

3 个答案: