如何使用jQuery复制点击div？

我想要div在单击button后自动复制。我发现JS解决方案，但我需要一个jQuery之一，我真的很糟糕。任何人都可以帮助我吗？如何使用jQuery复制点击div？

这就是我：

<div class="example-1"> 
    <div class="example-2"> 
    <p>Example one</p> 
    <p>Example two</p> 

    <button class="btn-copy">Copy</button> 
    </div> 
</div>

这就是我需要的（后点击）：

<div class="example-1"> 
    <div class="example-2"> 
    <p>Example one</p> 
    <p>Example two</p> 

    <button class="btn-copy">Copy</button> 
    </div> 

    <div class="example-2"> 
    <p>Example one</p> 
    <p>Example two</p> 

    <button class="btn-copy">Copy</button> 
    </div> 
</div>

来源

2016-10-27 EmptySnake

你需要尝试。你无法了解是否有人会提供你的代码。 https://api.jquery.com/clone/ http://api.jquery.com/after/ http://api.jquery.com/insertafter/ –

利用.clone()复制div和.after()追加。由于您正在使用课程，因此您可能只需要复制一个div，在这种情况下，您应该使用.closest()。你还需要传递一个布尔参数来克隆，这样所有的数据和事件处理程序将被连接到克隆的元素。

$(function(){ 
 
    $(".btn-copy").on('click', function(){ 
 
    var ele = $(this).closest('.example-2').clone(true); 
 
    $(this).closest('.example-2').after(ele); 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="example-1"> 
 
    <div class="example-2"> 
 
    <p>Example one</p> 
 
    <p>Example two</p> 
 

 
    <button class="btn-copy">Copy</button> 
 
    </div> 
 
</div>

来源

2016-10-27 04:20:08

Thx for answer but复制'button'应该在重复的' div'并且重复正确的'div'。不是第一个。 – EmptySnake

编辑答案。检查它 –

似乎是正确的。按钮重复块已被按下？ – EmptySnake

使用此方法clone。像这样：

$(document).on(click,'.btn-copy',function(){ 
    $(this).parents('.example-1').append($(this).parent().clone()); 
});

希望它有帮助。

来源

2016-10-27 04:16:58

更新

$(document).ready(function(){ 
 
    $('button').click(function(){ 
 
     $('.example-1').append($('.example-1').html()) 
 
    
 
     //console.log($('.example-1').html()); 
 
    }) 
 
    
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="example-1"> 
 
    <div class="example-2"> 
 
    <p>Example one</p> 
 
    <p>Example two</p> 
 
<button class="btn-copy">Copy</button> 
 
    </div> 
 
    
 
</div> 
 

 
<!--its only print at once-->

来源

2016-10-27 04:20:26 prasanth

Thx for answer，但复制'button'也应该在重复的'div'中工作。 'button'在最后一个末尾只能克隆一个'div'。 – EmptySnake

你只需要一个右键的按钮 – prasanth

看到更新后的答案..它应该没问题 – prasanth

试试这个

$('.btn-copy').click(function() 
 
{ 
 
$('.example-1').append($('.example-2').html()); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="example-1"> 
 
    <div class="example-2"> 
 
    <p>Example one</p> 
 
    <p>Example two</p> 
 

 
    <button class="btn-copy" >Copy</button> 
 
    </div> 
 
</div>

来源

2016-10-27 04:22:37

Thx for answer，但复制'button'也应该在重复的'div'中工作，并复制正确的'div'。不是第一个。 – EmptySnake

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<HTML> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
<BODY> 
<script> 
$(document).ready(function() { 
    $(".btn-copy").click(function(event){ 
    console.log('You clicked button'); 
    var parentnode=this.parentNode; 
    var OuterHtml=parentnode.outerHTML; 
    var TopLevel=parentnode.parentNode; 
    $(TopLevel).append(OuterHtml); 
    }); 
}); 
</script> 
<div class="example-1"> 
    <div class="example-2"> 
    <p>Example one</p> 
    <p>Example two</p> 
    <button class="btn-copy">Copy</button> 
    </div> 
</div> 
</BODY> 
</HTML>

来源

2016-10-27 04:57:56

如何使用jQuery复制点击div？

回答

相关问题