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

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

3 个答案: