How to get id of text box which is loaded dynamically -jquery

Question

I am dynamically loading three text boxes in a page, I need to take id of text boxes when it is clicked.

$.ajax({
    url: "../taxClass/getTaxClass",
    type: "post",
    contentType: "application/json",
    dataType: "json",
    success: function (data) {
        var taxClassBOs = data.taxClassBOs;
        $.each(taxClassBOs, function (key, value) {
            $("#taxVatId").append('<div><label class="col-sm-3 control-label" for="VatId">' + value.description + '</label></div><div class="col-sm-3"><input type="text" name="vatId" value=""placeholder="' + value.title + '" id="' + value.taxClassId + '" class="form-control" /></div>');
        });
    }
});

I have tried this code

$('input[type="text"]').click(function () {
    var id = $(this).attr('id');
    alert(id);
});

Answer 1

You need event delegation to bind the event with dynamically added elements. You can use on() for this.

$('staticParent').on('click','input[type="text"]'function(){

Delegated events

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers.

Answer 2

Almost correct, but since you are loading them dynamically, you need to delegate

$(document).on('click', 'input[type="text"]',function(){
                         var id = $(this).attr('id');
                         alert(id);
                    });

The reason you need to delegate is because if you attach the handler like

$('input[type="text"]').click(function(){...});

it will attach to only the current elements.

However, with delegation, it will apply the handler to all current and future elements.

Answer 3

Use event delegation on dynamically added elements.

$('#taxVatId').on('click', "input[type="text"]", function(){
                         var id = $(this).attr('id');
                         alert(id);
                    });