如何获取动态加载的文本框的ID -jquery

Question

我正在页面中动态加载三个文本框，单击时需要获取文本框的ID。

$.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>');
        });
    }
});

我已经尝试过此代码

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

Answer 1

您需要事件委托才能将事件与动态添加的元素绑定在一起。 您可以为此使用on（） 。

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

委托活动

委派事件的优势在于，它们可以处理来自后代元素的事件，这些事件在以后的时间添加到文档中。 通过选择保证在附加委托事件处理程序时会出现的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。

Answer 2

几乎正确，但是由于要动态加载它们，因此需要委托

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

您需要委派的原因是因为如果您附加处理程序，例如

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

它将仅附加到当前元素。

但是，通过委派，它将把处理程序应用于所有当前和将来的元素。

Answer 3

对动态添加的元素使用事件委托。

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