Reputation: 57
I am adding a new div when clicking an icon in the previous div. But when clicking the icon on the new generated div its is not working. Please help.
JSP:
<div class="amount">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="form-group label-floating">
<label class="control-label">Amount</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="form-group label-floating float-label-control" id="select-field">
<div class="float-label-control">
<label class="control-label">Currency
<small>(required)</small>
</label>
</div>
<select class="form-control dropdown" id="country-list">
<option value="1">AED</option>
<option value="2">BND</option>
<option value="3">INR</option>
<option value="4">OMR</option>
<option value="5">QAR</option>
<option value="6">SAR</option>
<option value="7">SGD</option>
<option value="8">TWD</option>
<option value="9">USD</option>
</select>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<i class="material-icons"id="addicon">add</i>
</div>
Jquery
$("#addicon").click(function () {
alert("add");
$(".tab-pane").append('<div class="row"><div class="purpose"><div class="amount"><div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"><div class="form-group label-floating"><label class="control-label">Amount</label><input type="text" class="form-control"></div></div><div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"><div class="form-group label-floating float-label-control" id="select-field"><div class="float-label-control"><label class="control-label">Currency<small>(required)</small></label></div><select class="form-control dropdown" id="country-list"><option value="1">AED</option><option value="2">BND</option><option value="3">INR</option><option value="4">OMR</option><option value="5">QAR</option><option value="6">SAR</option><option value="7">SGD</option><option value="8">TWD</option><option value="9">USD</option></select></div></div><div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"><i class="material-icons"id="deleteicon">clear</i><i class="material-icons"id="addicon">add</i></div></div>');
});
Please help me to solve.
Upvotes: 0
Views: 36
Reputation: 1996
you can only use one id per page use class instead or use onclick attribute use following code
function addRow() {
alert("add");
$(".tab-pane").append('<div class="row"><div class="purpose"><div class="amount"><div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"><div class="form-group label-floating"><label class="control-label">Amount</label><input type="text" class="form-control"></div></div><div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"><div class="form-group label-floating float-label-control" id="select-field"><div class="float-label-control"><label class="control-label">Currency<small>(required)</small></label></div><select class="form-control dropdown" id="country-list"><option value="1">AED</option><option value="2">BND</option><option value="3">INR</option><option value="4">OMR</option><option value="5">QAR</option><option value="6">SAR</option><option value="7">SGD</option><option value="8">TWD</option><option value="9">USD</option></select></div></div><div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"><i class="material-icons"id="deleteicon">clear</i><i onclick="addRow()" class="material-icons"id="">add</i></div></div>');
}
Upvotes: 0
Reputation: 27051
First, of your adding an element that will result in duplication of the id, Id's should always be unique.
Second, if you change the id to class, then use $(document).on('click','.addicon',function() {})
Demo
$(document).on("click", ".addicon", function() {
$(".tab-pane").append('<div class="row"><div class="purpose"><div class="amount"><div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"><div class="form-group label-floating"><label class="control-label">Amount</label><input type="text" class="form-control"></div></div><div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"><div class="form-group label-floating float-label-control" id="select-field"><div class="float-label-control"><label class="control-label">Currency<small>(required)</small></label></div><select class="form-control dropdown" id="country-list"><option value="1">AED</option><option value="2">BND</option><option value="3">INR</option><option value="4">OMR</option><option value="5">QAR</option><option value="6">SAR</option><option value="7">SGD</option><option value="8">TWD</option><option value="9">USD</option></select></div></div><div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"><i class="material-icons"id="deleteicon">clear</i><i class="material-icons addicon">add</i></div></div>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-pane">
<div class="row">
<div class="amount">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="form-group label-floating">
<label class="control-label">Amount</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="form-group label-floating float-label-control" id="select-field">
<div class="float-label-control">
<label class="control-label">Currency
<small>(required)</small>
</label>
</div>
<select class="form-control dropdown" id="country-list">
<option value="1">AED</option>
<option value="2">BND</option>
<option value="3">INR</option>
<option value="4">OMR</option>
<option value="5">QAR</option>
<option value="6">SAR</option>
<option value="7">SGD</option>
<option value="8">TWD</option>
<option value="9">USD</option>
</select>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<i class="material-icons addicon">add</i>
</div>
</div>
</div>
</div>
Upvotes: 1