点击动态生成的编辑图标时，如何获取其ID并修改输入框值？

你遇到的核心问题是动态生成的元素无法触发绑定的事件，而且误用了change事件（这个事件针对表单元素值变化，点击操作应该用click事件）。下面给你一步步的解决方案：

问题根源 #

你当前用的$('.editByAnchor').change(...)是直接把事件绑定到DOM加载完成时已存在的元素上，但你的.editByAnchor是AJAX请求完成后才动态添加到页面的——绑定事件时这些元素还不存在，所以事件自然不会生效。

正确的事件绑定方式：事件委托 #

我们需要用jQuery的事件委托机制，把事件绑定到一个提前存在的父元素（比如document，或者更接近的.cards容器，后者性能更优），通过父元素监听子元素的点击行为。

替换你原来的事件绑定代码为：

// 用事件委托绑定点击事件到动态生成的.editByAnchor元素
$(document).on('click', '.editByAnchor', function(e) {
    e.preventDefault(); // 阻止a标签默认的跳转行为
    const addressId = this.id; // 获取当前点击元素的ID
    alert("你点击的地址ID是：" + addressId);
    
    // 同时把ID赋值给隐藏输入框
    $('#edit_id').val(addressId);
});

额外的代码优化建议 #

1. 减少重复的对象引用：你在AJAX的success回调里多次重复写response.response.total_record[0]，可以把它存成一个变量，让代码更简洁易维护：

success: function(response){
    const userData = response.response.total_record[0];
    if (userData.status === "active") {
        $('#email').html(userData.email);
        $('#name').html(`${userData.first_name} ${userData.last_name}`);
        $('#first').val(userData.first_name);
        $('#last').val(userData.last_name);
        $('#phone').val(userData.phone_number);
        $('#alternative').val(userData.alternative_number);
        $('#id').val(userData._id);
        $('#status').val(userData.status);

        if (userData.status === "active") {
            $('#activate').hide();
        }
        if (userData.status === "deactivate") {
            $('#activate').show();
            $("#deactivate").hide();
        }

        $.each(userData.address,function(i,item){
            console.log(item); // 直接用item即可，无需再通过索引取值
            $('.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='${item._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='${item._id}'>${item.address}</span></p>
                </div>
            </div>`);
        });
    }
}

2. 修正AJAX语法错误：你代码里的url:"url,少了闭合的引号和括号，应该改成url:"你的实际接口地址",。

这样修改后，点击每个动态生成的编辑图标，就能正确弹出对应的ID值，同时也能把ID赋值给隐藏的#edit_id输入框啦。

内容的提问来源于stack exchange，提问作者gourav