jQuery click function not being called for removing dynamically generated text boxes

Question

I'm having issues with remove buttons on dynamically generated text boxes. The click function does not get called at all, and I'm not sure why. Can someone please point me in the right direction?

Here is the 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');

I also have setup a JSFiddle page: https://jsfiddle.net/302xsar2/2/

event delegation is the answer – Anoop Joshi P May 25 '15 at 07:07 — Anoop Joshi P, May 25 '15 at 07:07
updated fiddle https://jsfiddle.net/302xsar2/3/ – Anoop Joshi P May 25 '15 at 07:10 — Anoop Joshi P, May 25 '15 at 07:10

score 2 · Answer 1 · answered May 25 '15 at 07:07

2

You need to use event delegation for attaching events to dynamically generated element:

$("#additionalAuthorsTextboxes").on('click','.removeAdditionalAuthor',function () {
    $(this).closest('div').remove();
});

answered May 25 '15 at 07:07

Milind Anantwar

81,290
25
94
125

jQuery click function not being called for removing dynamically generated text boxes

1 Answers1