如何为.NET项目中JS动态生成的按钮设置唯一ID？

你的核心问题在于重复ID冲突和错误的变量作用域，导致动态生成的按钮无法正确绑定事件并获取对应元素的值：

1. 动态生成HTML时使用了固定ID（如Vsel、Vquantity），DOM中重复ID会让浏览器只识别第一个元素；
2. 循环里的i是全局变量，循环结束后所有按钮的ID都会变成VarBtn_加最终的i值，根本没生成唯一ID；
3. 初始给.dropdown加ID的代码完全无效——因为这段代码在页面加载时执行，而你的下拉菜单是AJAX请求后才动态生成的，执行时DOM里还没有这些元素。

解决思路 #

放弃依赖ID定位元素，改用类选择器+DOM相对查找，配合事件委托处理动态元素的点击事件，确保每次点击都能精准获取当前按钮对应的一组数据。

具体修改步骤 #

1. 删除无效的ID初始化代码

直接删掉这段代码，完全没用：

var i = 0;
$('.dropdown').each(function () {
    i++;
    var newID = 'VarBtn' + i;
    $(this).attr('id', newID);
});

2. 修改AJAX回调中的HTML生成逻辑

把所有重复ID换成类名，并将图片URL存入容器的data-*属性，方便后续获取：

$.each(data.data, function () {
    const imgUrl = this.url;
    $('#display').append(                    
        '<div class="col-md-3 p-10" style="padding-top:10px" data-url="' + imgUrl + '">' +
        '<div class="dropdown">' +
        '<button class="btnV">Dropdown</button>' + // 移除重复ID idOne
        '<div class="dropdown-content">' + // 移除重复ID myDropdown
        '<br>Select size' +
        '<select class="vsel">' + // 替换ID为类名 vsel
        '<option selected>256x256</option>' +
        '<option>512x512</option>' +
        '<option>1024x1024</option>' +
        '</select>' +
        '<br>Enter quantity' +
        '<input type="number" class="vquantity" value="1" min="1" max="10" />' + // 替换ID为类名 vquantity
        '<br>' +
        '<button class="generate-btn">Generate</button>' + // 移除ID，添加类名 generate-btn
        '</div>' +
        '</div>' +
        '<img class="p-10" src="' + imgUrl + '">' + // 移除重复ID GenImg
        '</div>');
});

3. 修改事件委托逻辑

绑定到类选择器，点击时通过DOM关系定位当前按钮对应的元素：

// 推荐绑定到#display而非document.body，减少事件冒泡层级，提升性能
$('#display').on('click', '.generate-btn', function () {
    // 找到当前按钮所在的外层容器（每个图片+下拉为一组）
    const $container = $(this).closest('.col-md-3');
    
    // 在容器内精准查找对应元素，获取值
    const size = $container.find('.vsel').val();
    const n = parseInt($container.find('.vquantity').val());
    const url = $container.data('url'); // 从data属性直接取图片URL

    // 这里可以用获取到的数据执行后续逻辑，比如AJAX请求
    console.log('数量:', n, '尺寸:', size, '图片URL:', url);
});

核心优化点说明 #

• 类名替代重复ID：避免DOM中ID冲突的问题，确保每个元素都能被正确定位；
• DOM相对查找：通过closest()找到当前按钮的父容器，再在容器内查找元素，保证获取的是当前组的对应数据，不会混淆其他组；
• 事件委托绑定到静态父元素：#display是页面加载时就存在的静态元素，事件委托能自动处理后续动态生成的按钮点击；
• data属性存储URL：无需从img的src中解析URL，直接通过data-url获取更高效可靠。

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