Manage dynamic elements within dynamic elements in jQuery
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script>
<div class="row">
<fieldset class="frame-border">
<legend class="frame-border">Type</legend>
<div class="row">
<div class="form-group-sm required">
<label class="control-label col-xs-4 col-md-4">Type</label>
<label class="col-xs-4 col-md-4">1st Parameter</label>
<label class="col-xs-4 col-md-4">2nd Parameter</label>
</div>
</div>
<div class="row">
<div class="form-group-sm required">
<div class="col-xs-4 col-md-4">
<span class="help glyphicon glyphicon-info-sign" data-toggle="popover" data-placement="right" title="Type of Membership."></span>
<select id="registrationMemberTypeSample" class="form-control" >
<option value="yearly" selected="selected">Yearly</option>
<option value="period">Period</option>
</select>
</div>
<div class="col-xs-4 col-md-4">
<span class="help glyphicon glyphicon-info-sign" id="registrationMemberParam1Help" data-toggle="popover" data-placement="right" title="Help"></span>
<input type="number" id="registrationMemberParam1" name="registrationMemberParam1" class="form-control" min="2014" max="3000" step="1" placeholder="Name">
</div>
<div class="col-xs-4 col-md-4">
<span class="help glyphicon glyphicon-info-sign" id="registrationMemberParam2Help" data-toggle="popover" data-placement="right" title="Help"></span>
<input type="number" id="registrationMemberParam2" name="registrationMemberParam2" class="form-control" min="2015" max="3000" step="1 "placeholder="Name">
</div>
</div>
</div>
</fieldset>
</div>
<div class="row">
<fieldset class="frame-border">
<legend...
CSS
fieldset.frame-border {
border: 1px groove #ddd !important;
padding: 0 5px 10px !important;
margin: 0 0 5px 0 !important;
-webkit-box-shadow: 0px 0px 0px 0px #000;
box-shadow: 0px 0px 0px 0px #000;
}
legend.frame-border {
font-size: 1.1em !important;
font-weight: bold !important;
text-align: left !important;
width:inherit;
padding:0 5px;
border-bottom:none;
margin-bottom:5px;
}
.form-group-sm.required .control-label:after {
content:"*";
color:red;
}
.row
{
margin-left: 8px !important;
margin-right: 8px !important;
padding-bottom: 8px !important;
}
.help {
position:absolute;
right:-5px;
top:5px;
}
.glyphicon.big {
font-size: 1.2em;
}
.padding-lr-xs {
padding-right:5px !important;
padding-left:5px !important;
}
.member-template {
display:none;
}
JavaScript
function registrationTypeChange() {
var theValue = $("#registrationMemberTypeSample").find("option:selected").text();
if(theValue === "Yearly" )
{
$('#registrationMemberParam1Help').attr("title","Please provide the year of membership");
$('#registrationMemberParam1').attr("placeholder","Year");
$('#registrationMemberParam2').hide();
$('#registrationMemberParam2Label').hide();
$('#registrationMemberParam2Help').hide();
}
else if(theValue === "Period" )
{
$('#registrationMemberParam1Help').attr("title","Please provide the starting year of membership");
$('#registrationMemberParam1').attr("placeholder","From");
$('#registrationMemberParam2Help').attr("title","Please provide the ending year of membership");
$('#registrationMemberParam2').attr("placeholder","To");
$('#registrationMemberParam2').show();
$('#registrationMemberParam2Help').show();
$('#registrationMemberParam2Label').show();
}
}
function addMember() {
var memberNum = $('.member').length+1;
var $html = $('.member-template').clone();
$html.find('[id=registrationMemberLabel]').html("Member" + memberNum);
$html.find('[id=registrationMemberLabel]').attr("id", "registrationMember" + memberNum + "Label");
$html.find('[id=registrationMemberName]').attr("id", "registrationMember" + memberNum + "Name");
$html.find('[id=registrationMemberType]').attr("id", "registrationMember" + memberNum + "Type");
return $html.html();
}
function removeMember() {
var memberNum = $('.member').length;
if(memberNum > 1 ) {
document.getElementById("registrationMember" + memberNum).remove();
}
else {
$("#memberMinAlert").alert();
$("#memberMinAlert").fadeTo(2000, 500).slideUp(500, function(){
$("#memberMinAlert").alert('close');
});
}
}
function addMemberHTML(){
$('<div/>', {
'class' : 'member', 'id' :'registrationMember'+($('.member').length+1), html: addMember()
}).appendTo('#memberContainer');
}
$(function ()...