要生成克隆的div与html控件，动态ID和DIV

中的元素的侦听器我想复制一个div及其所有内容，以生成一个克隆的div（例如，添加行的发票dinamically）。我需要克隆div的内容，包括html控件，DIV中元素的动态ID和监听器！要生成克隆的div与html控件，动态ID和DIV

有没有简单的方法来做到这一点？谢谢！

enter image description here

代码工作，但它不是克隆整个DIV也克隆了文本框的ID可以有一个人帮助我。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 

<head> 

<style> 
body 
{ 
    background: none !important; 
} 
</style> 

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 

    <title>  Dynamically create input fields- jQuery </title> 


    <link href="theme/css/ui/ui.base.css" rel="stylesheet" media="all" /> 

    <link href="theme/css/themes/black_rose/ui.css" rel="stylesheet" title="style" media="all" /> 



    <!--[if IE 6]> 

    <link href="theme/css/ie6.css" rel="stylesheet" media="all" /> 



    <script src="theme/js/pngfix.js"></script> 

    <script> 

     /* Fix IE6 Transparent PNG */ 

     DD_belatedPNG.fix('.logo, ul#dashboard-buttons li a, .response-msg, #search-bar input'); 



    </script> 

    <![endif]--> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> 
    </script> 
    <script type="text/javascript"> 
     $(function() { 
      var i = 1; 
     $('#addNew').live('click', function() { 
      var getParentId = $(this).closest('fieldset').attr('id'); 
      var getParentId1 = $('#'+getParentId); 
      i = $('#'+getParentId+' p input').size(); 
      if(i > 6) { 
      alert("Limitation upto 5"); 
      return false; 
      } 
      $('<p><input type="text" id="p_new" name="p_new_' + i +'" value="" placeholder="I am New" /><a href="#" id="remNew">Remove</a> </p>').appendTo(getParentId1); 
      i++; 
      return false; 
     }); 

     $('#remNew').live('click', function() { 
      if(i > 2) { 
      $(this).parents('p').remove(); 
      i--; 
      } 
      return false; 
     }); 

     // Duplicate Query Block 
     var addQueryBlock = $('#queryblock'); 
     var j = $('#queryblockfld').size() + 1; 
     $('#addNewQueryBlock').live('click', function() { 
      if(j > 6) { 
      alert("Limitation upto 5"); 
      return false; 
      } 
      $('<fieldset id="queryblock' + j +'" name="queryblock' + j +'"><legend>Query Block' + j + '</legend><div style="float:right;" id="addqueryblock"><a style="text-decoration: none;" href="#" id="remNewFieldset"> &#8211; </a><a style="text-decoration: none;" href="#" id="addNewQueryBlock">+</a></div><div id="addinput"><p><input type="text" id="p_new1" name="p_new" value="" placeholder="Input Value" /><a href="#" id="addNew">Add</a><input type="text" id="input2" name="input2" value="" placeholder="input2" /></p></div></fieldset>').appendTo(addQueryBlock); 
      j++; 
      return false; 
     }); 

     $('#remNewFieldset').live('click', function() { 
      if(j > 2) { 
      $(this).parents('fieldset').remove(); 
      j--; 
      } 
      return false; 
     }); 
     }); 
    </script> 

</head> 


    <body> 
    <h2> 
     Dynamically Add Another Input Box 
    </h2> 

    <div id="queryblock"> 
     <fieldset id="queryblockfld" name="queryblockfld"> 
     <legend> 
      Query Block 
     </legend> 
     <div style="float:right;" id="addqueryblock"> 
      <a style="text-decoration: none;" href="#" id="addNewQueryBlock">+</a></div> 
      <div id="addinput"> 
      <p> 
       <input type="text" id="p_new3" name="p_new3" value="" placeholder="Input Value" /> 
       <a href="#" id="addNew"> Add </a> Wlcome to my world 
       <input type="text" id="input2" name="input2" value="" placeholder="input2" /> 
      </p> 
      </div> 
     </fieldset> 
    </div> 
     </body> 
    </html>

来源

2013-05-27 TomPHP

简单地使用jQuery'.clone（）'方法:) – GEMI

但是如何在DIV内输入字段也将克隆到新名称kinldy检查下面的URL我也试过http://jsfiddle.net/ kXmpY /但一个但粘性。 – TomPHP

那么如果你想拥有动态ID和监听器，那么你的问题是不正确的。你不想克隆一个元素:)你想要的是能够创建具有特定参数的HTML元素。我认为你需要制造一个工厂...... :) – GEMI

经过长时间的搜索后，我发现了一个工作代码，它可以做我想做的事。请参阅链接

<div id="events_wrapper"> 
<div id="sub_events"> 
<p><label>Art Space </label> 
<input type="text" id="as_name" name="as_name" class="txt-input small"/> 
<input type="hidden" id="as_id" name="as_id" class="txt-input small"/>          
</p> 

<p><label>Start Date </label> 
<input type="text" id="start_date" name="start_date" class="datepicker txt-input small"/> 

<label>End Date </label> 
<input type="text" id="end_date" name="end_date" class="datepicker txt-input small" /> 
</p> 

<p><label>Opening Hours </label> 
From : <input style="width: 100px" type="text" id="time_from" name="time_from" class="timepicker txt-input small" /> 

To : <input style="width: 100px" type="text" id="time_to" name="time_to" class="timepicker txt-input small"/> </p>              
</div> 
    <br/> 
<input type="button" id="add_another_event" name="add_another_event" value="Add Another" />

JS功能：

$('#add_another_event').click(function() 
    { 
     alert('test');var $address = $('#sub_events'); 
     var num = $('.clonedAddress').length; // there are 5 children inside each address so the prevCloned address * 5 + original 
     var newNum = num + 1; 
     var newElem = $address.clone().attr('id', 'address' + newNum).addClass('clonedAddress'); 

     //set all div id's and the input id's 
     newElem.children('div').each (function (i) { 
      this.id = 'input' + (newNum*5 + i); 
     }); 

     newElem.find('input').each (function() { 
      this.id = this.id + newNum; 
      this.name = this.name + newNum; 
     }); 

     if (num > 0) { 
      $('.clonedAddress:last').after(newElem); 
     } else { 
      $address.after(newElem); 
     } 

     $('.datepicker', newElem).removeClass('hasDatepicker').datepicker(); 
     $('#btnDel').removeAttr('enabled'); 
    });  

$('.datepicker').datepicker();

Also Refer Jquery date picker and time picker do not work when fields are dynamically created

希望这将帮助其他人。！

上述代码的工作实例：http://jsfiddle.net/MkhZ2/24/

来源

2013-05-31 08:10:24 TomPHP

function duplicate() { 
    var original = document.getElementById('duplicater' + i); 
    var clone = original.cloneNode(true); // "deep" clone 
    clone.id = "duplicetor" + ++i; // there can only be one element with an ID 
    clone.onclick = duplicate; // event handlers are not cloned 
    original.parentNode.appendChild(clone); 
}

不duplicetor但duplicater :)那么就不会在控制台中显示错误，并添加克隆DIV

为什么不把它克隆输入字段？它会克隆它...

来源

2013-05-27 07:31:28

Div独自重复，而不是DIV中元素的ID。 – TomPHP

不'复制'div的ID不是它里面的元素？还是我不明白什么？ –

DIV ID已更新为新的ID，但输入字段ID未更新为新名称？ – TomPHP

你可以通过使用jQuery的.clone()方法。考虑以下代码：

//first clone your div 
clonedDiv = $('#IdOfYourDIV').clone(); 

//use .attr() method to change the id 
$(clonedDiv).attr('id','YourDynamicID');

现在您的'克隆'div已准备就绪。但使用第一个div的ID绑定的处理程序将无法在克隆的DIV上工作。

来源

2013-05-27 08:12:54 codeVerine

我dev的这样的事情，所以我的解决方案是非常简单的。使用克隆复制您的div和appentTo集合假设div包含在body中。

$("#btn_act").click(function(){ 
    var body = $("body"); //Where is contained the object 
    var obj = $("#myDiv"); //Object who will be cloned 
    var e = obj.clone(true).appendTo(body); 
    $(e).find("input").each(function(){ 
     //ie: myInput0, myInput1 will be deleted 
     if ($(this).attr("id") != 'myInput'){ 
      $(this).remove(); 
     } 
    }); 
});

想想这会帮助你，如果你仍然需要一个小解决方案。

来源

2016-07-26 16:50:53

要生成克隆的div与html控件，动态ID和DIV

回答

相关问题