Having some trouble with the remove buttons not working on dynamically generated text boxes. The click function doesn't seem to be triggering, and I'm a bit stuck. Any ideas on what might be causing this issue?
Take a look at the following code:
HTML
<div class="panel panel-default">
<div class="panel-heading">Additional Authors</div>
<div class="panel-body">
<input id="addAuthorButton" type="button" value="Add Author" class="btn btn-lg btn-default btn-block" />
<div id="additionalAuthorsTextboxes">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
JS
$(document).ready(function(){
var counter = 0;
$("#addAuthorButton").click(function () {
if(counter==5){
alert("Only 5 additional authors allowed.");
return false;
}
counter++;
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'additionalAuthor' + counter).attr("class", 'additionalAuthor input-group');
newTextBoxDiv.after().html("<span class='input-group-addon'><span class='glyphicon glyphicon-user'></span></span><input class='form-control' type='text' placeholder='Author Name'><span class='input-group-addon'><span style='color: red;' class='glyphicon glyphicon-remove removeAdditionalAuthor'></span></span>");
newTextBoxDiv.appendTo("#additionalAuthorsTextboxes");
});
$(".removeAdditionalAuthor").click(function () {
$(this).closest('div').remove();
});
});
CSS
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css');
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css');
To see the issue in action, check out this JSFiddle page: https://jsfiddle.net/302xsar2/2/