如何获取动态加载的文本框的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

您需要event delegation与动态添加元素绑定事件。您可以使用on()。

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

Delegated events

委托事件有优势，他们可以处理来自被添加到该文件在稍后的时间 后代元素的事件。通过 挑选一个在连接了委托事件处理程序时保证存在的元素，可以将委派事件用于 ，从而避免需要经常附加和删除事件处理程序。

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); 
        });