javascript - 当我们点击动态创建的编辑图标时，如何更改输入字段中的值？

Question

在代码中，有一个ajax将值分配给字段，但有一个动态创建的编辑图标，这意味着您在数据库中添加了多少地址，然后将创建编辑图标的次数。我的需要是，当我点击第一个按钮时，它会提醒它的 id 值，当我点击另一个按钮时，它会提醒它的 id 值以下是我尝试过的代码:-

var full_url = document.URL; // Get current url
var url_array = full_url.split('=') // Split the string into an array with / as separator
var UserId = url_array[url_array.length-1];  // Get the last part of the array (-1)
$.ajax({
    url:"url,
    type: "GET",
    dataType: 'json',
    async: false,
    data:{"UserId":UserId},
    success: function(response){
        if (response.response.total_record[0].status === "active") {
            $('#email').html(response.response.total_record[0].email);
            $('#name').html(response.response.total_record[0].first_name+" "+response.response.total_record[0].last_name);
            $('#first').val(response.response.total_record[0].first_name);
            $('#last').val(response.response.total_record[0].last_name);
            $('#phone').val(response.response.total_record[0].phone_number);
            $('#alternative').val(response.response.total_record[0].alternative_number);
            $('#id').val(response.response.total_record[0]._id);
            $('#status').val(response.response.total_record[0].status)
            if (response.response.total_record[0].status === "active") {
                $('#activate').hide();
            }
            if (response.response.total_record[0].status === "deactivate") {                    $('#activate').show();
                $("#deactivate").hide();
            }
            $.each(response.response.total_record[0].address,function(i,item){
                console.log(response.response.total_record[0].address[i])
                $('#edit_id').val(response.response.total_record[0].address[i]._id)
            $('.cards').append('<div class="location-list"><header class="header_title"><div class="location_heading"><h3>Location:</h3></div><div class="edit_icon"><a class="editByAnchor" id='+response.response.total_record[0].address[i]._id+' href="#" data-toggle="modal" data-target="#edit_address"><i class="fa fa-edit"></i></a></div></header><div id="dAddress" class="location-detial"><p><span id='+response.response.total_record[0].address[i]._id+'>'+response.response.total_record[0].address[i].address+'</span></p></div></div>');
            });                 
        }
    }
});  

HTML

<input type="hidden" id = "edit_id" value= "">

用于查找点击的 Jquery

$('.editByAnchor').change(function() {
            alert("You just clicked checkbox with the name " + this.id)
});

产生输出

<a class="editByAnchor" id="1" href="#" data-toggle="modal" data-target="#edit_address"><i class="fa fa-edit"></i></a>
/*more like this but id will be change base on the dynamically fields*/

上面的输出 anchor tag 具有 id 属性，当您看到我的代码时，它将动态分配，那么我如何获取 的 id 属性单击每个图标。

Answer 1

对于动态创建的元素，请使用on()。此外，您还必须使用 click 事件而不是 change:

$('.editByAnchor').on('click', function() {
    alert("You just clicked checkbox with the name " + this.id)
});