如何在jQuery AJAX请求中获取动态添加元素的值？

你的问题核心在于AJAX请求的异步特性——浏览器发送AJAX请求的同时，会继续执行后续代码，不会等待请求完成。所以当你在AJAX外部执行$('.line2').attr('data-line2')时，服务器返回的HTML还没被追加到页面上，自然获取不到这个元素的属性值。

正确做法：把获取元素的逻辑放到AJAX的success回调里 #

success回调是在请求成功、HTML已经被追加到DOM之后才执行的，这时候去获取动态添加的元素就没问题了：

$.ajax({
    type: "POST",
    data: { 
        symbol: symbol, 
        val1: val1, 
        val2: val2, 
        val3: val3, 
        val4: val4, 
        val5: val5, 
        val6: val6, 
        val7: val7, 
        line_val: line_val 
    },
    dataType: "text",
    url: "getCompanyData.php",
    success: function(data) {
        $('.content_panel').append(data);
        $('.load_analyzer').hide();
        
        // 在这里获取动态添加的元素属性
        if ($('.radiobox').hasClass('activeradio')) {
            var active_line = $('.activeradio .line_check').val();
            var new_added = $('.line2').attr('data-line2');
            console.log('New Added Value : ' + new_added); // 现在能正确获取值了
        }
    }
});

为什么原来的代码不行？ #

给你梳理下代码执行的时间线就清楚了：

1. 浏览器执行$.ajax(...)，发送POST请求到服务器
2. 浏览器立刻跳过AJAX，执行后面的if ($('.radiobox').hasClass('activeradio')) {...}代码，这时候服务器还没返回数据，.line2元素根本不存在，所以new_added是undefined
3. 过了一会儿，服务器返回数据，success回调才执行，把HTML追加到页面上，但这时候前面的console.log早就跑完了

可选方案：用async/await写同步风格代码（ES6+） #

如果你习惯同步逻辑的写法，可以把AJAX包装成Promise，用async/await实现：

async function fetchAndProcessData() {
    try {
        const data = await $.ajax({
            type: "POST",
            data: { 
                symbol: symbol, 
                val1: val1, 
                val2: val2, 
                val3: val3, 
                val4: val4, 
                val5: val5, 
                val6: val6, 
                val7: val7, 
                line_val: line_val 
            },
            dataType: "text",
            url: "getCompanyData.php"
        });
        
        $('.content_panel').append(data);
        $('.load_analyzer').hide();
        
        if ($('.radiobox').hasClass('activeradio')) {
            var active_line = $('.activeradio .line_check').val();
            var new_added = $('.line2').attr('data-line2');
            console.log('New Added Value : ' + new_added);
        }
    } catch (error) {
        console.error('请求出错:', error);
    }
}

// 调用函数
fetchAndProcessData();

注意：这种方式需要你的运行环境支持ES6的async/await（现代浏览器都支持，旧环境可以用Babel转译）。

强烈不推荐的方案：设置async: false #

虽然jQuery的AJAX支持async: false让请求变成同步，但这会导致浏览器在请求期间完全卡住，用户无法进行任何操作，体验极差，所以绝对不建议用这种方式。

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