Я совершенно не знаком с jquery и мне нужна помощь по поводу клонирования элемента. поэтому в основном в моей программе есть один родительский элемент и дочерний элемент внутри родительского элемента. теперь, когда я нажимаю на клонирование (родительский элемент), он клонирует родительский элемент с дочерним элементом, и когда я нажимаю кнопку дочернего клонирования, он клонирует дочерний элемент, теперь в клонированном родительском элементе я не могу клонировать дочерний элемент. как я могу это исправить.
// clone code of the main part
$(document).ready(function() {
$(".clone").click(function() {
var $self = $(this),
$element_to_clone = $self.prev(),
$wrapper_parent_element = $self.parent(),
$new_element = $element_to_clone.clone();
$new_element.find('.del').removeClass('hidden disabled').addClass('enabled');
$new_element.insertAfter($element_to_clone);
return false;
});
$("body").on("click", ".del.enabled", function(event) {
var $parent = $(this).parent();
$parent.remove();
return false;
});
});
// end of clone code of the main part
// clone code of the inner side table/ child of main part
$(function(){
$('#addMore').on('click', function() {
var data = $("#tb tr:eq(1)").clone(true).appendTo("#tb");
data.find("input").val('');
});
$(document).on('click', '.remove', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>1) {
$(this).closest("tr").remove();
} else {
alert("Sorry!! Can't remove first row!");
}
});
});
//end of clone code of the inner side table/ child of main part
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: auto;
height: 100px;
}
body, html {
width: 100%;
height: 100%;
margin: 0;
}
.containers {
width: 100%;
height: 100%;
}
.leftpane {
width: 25%;
height: 100%;
float: left;
border-collapse: collapse;
}
.middlepane {
width: 50%;
height: 100%;
float: left;
border-collapse: collapse;
}
.rightpane {
width: 25%;
height: 100%;
position: relative;
float: right;
border-collapse: collapse;
}
.abcd{
margin-left: 160px;
}
.spacing {
margin-bottom:5px
}
.hidden {
display:none;
}
.stuff {
width:310px;
min-height:30px;
}
.stuffs_to_clone {
position:relative;
border:3px ;
padding:30px;
}
.del,
.clone
{
z-index:999;
cursor:pointer;
background-position:left center;
background-repeat:no-repeat;
min-width:24px;
min-height:24px;
padding-left:26px;
height: 24px;
width: 24px;
}
.clone {
background-image:url('http://cdn1.iconfinder.com/data/icons/musthave/24/Copy.png');
}
.del {
position:relative;
float:right;
bottom:0px;
right:-200px;
background-image:url('http://cdn1.iconfinder.com/data/icons/fugue/bonus/icons-24/cross.png');
}
.centered
{
text-align:center;
}
hr.black {
border: 1.5px solid black;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="containers">
<div class="leftpane">
</div>
<div class="middlepane">
<div id="printDiv">
<br>
<div class="stuffs_wrapper">
<form action="" method="post">
<div class="stuffs_to_clone">
<div class="stuff">
<div class="del disabled hidden"></div>
<div align="left" class="abcd">
<select>
<option value="" disabled="disabled" selected="selected">select days</option>
<option value="1">Mon</option>
<option value="2">tue</option>
</select>
</div>
<div class="spacing"></div>
<div >
<div align="left" class="abcd">
<select>
<option value="" disabled="disabled" selected="selected">type</option>
<option value="1">One</option>
</select>
</div>
</div>
<div class="spacing"></div>
<table border="0" id="tb" class="abcd">
<a>
<tr >
<th style="outline: thin solid">Excersise</th>
<th style="outline: thin solid">time</th>
<th style="outline: thin solid">reps</th>
<th><a href="javascript:void(0);" style="font-size:18px;" id="addMore" title="Add More Person"><span class="glyphicon glyphicon-plus"></span></a></th>
</tr>
</a>
<tr>
<th>
<select>
<option value="" disabled="disabled" selected="selected">select excersise</option>
<option value="1">walk</option>
</select>
</th>
<th>
<select>
<option value="" disabled="disabled" selected="selected">select time</option>
<option value="1">10</option>
</select>
</th>
<th>
<select>
<option value="" disabled="disabled" selected="selected">select reps</option>
<option value="1">6</option>
</select>
</th>
<td><a href='javascript:void(0);' class='remove'><span class='glyphicon glyphicon-remove'></span></a></td>
</tr>
</table>
<div align="left" class="abcd">
<hr width="215%" class="black" /> <!-- black line -->
</div>
</div>
<div class="clone" align title="Create new item">clone parent </div>
</div></form></div>