logo标签列表

如何使用jQuery在单击时复制div？

javascriptjqueryhtmlcss
6

当单击时，我希望一个

在自己之后复制。我找到了用JS的解决方案，但我需要一个jQuery的解决方案，而我真的不擅长它。

这是我目前拥有的：

<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>
2
你需要尝试。如果有人为你提供代码，你就无法学习。https://api.jquery.com/clone/ http://api.jquery.com/after/ http://api.jquery.com/insertafter/ - hdotluna
5个回答
14
使用.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>

谢谢您的回答，但是复制“按钮”应该在复制的“div”中也能正常工作，并且复制正确的“div”，而不是第一个。 - EmptySnake
修改了答案。请检查。 - Shubham Khatri
似乎没问题。按钮复制块，其中已经按下了吗？ - EmptySnake
这就是我使用 closest 和 after 的原因。现在问题解决了吗？ - Shubham Khatri
3

已更新

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

谢谢回答，但是复制“按钮”也应该在重复的“div”中起作用。而且“按钮”必须只克隆最后一个“div”的末尾。 - EmptySnake
不行。我们复制的每个div都必须有一个button。 - EmptySnake
克隆按钮也可以与相同的克隆事件一起工作。 - prasanth
（带按钮的第一个块）点击后，我们会得到（也带按钮的第二个块。第一个块保持不变），现在我们可以点击第一个块中的按钮进行复制，或者点击第二个块中的按钮来复制第二个块。抱歉，用英语解释这个想法对我来说很困难。 - EmptySnake
当点击按钮时，它将仅获取块内的数据。第一个块按钮=>第一个数据。第二个块按钮=>第二个数据。 - prasanth
是的，这就是它应该工作的方式。在您当前的代码中，只有一个按钮可以工作并复制所有被复制的块。 - EmptySnake
2

试试这个

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

谢谢您的回答，但是复制“按钮”也应该在复制的“div”中起作用，并且复制正确的“div”，而不是第一个。 - EmptySnake
0
使用clone方法来实现。像这样：
$(document).on(click,'.btn-copy',function(){
  $(this).parents('.example-1').append($(this).parent().clone());
});

希望对你有帮助。

0
    <!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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接