升级jQuery 3.7后，动态渲染含let关键字的JS内容报错怎么解决

问题场景 #

将旧项目迁移到jQuery 3.7后，通过Flask+AJAX动态渲染HTML时出现异常：首次调用loadContent()加载动态内容正常，第二次调用时控制台报错：

Identifier 'test' has already been declared

相关代码如下：

Python后端代码 #

from flask import Flask, render_template    
app = Flask(__name__)    

@app.route('/')
def hello_world():
    return render_template('test.html')    

@app.route('/dynamic')
def dynamic_content():
    return render_template('dynamic.html')

if __name__ == '__main__':
    app.run()

前端test.html #

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<div id="content">Hello World!</div>
<button onclick="return loadContent();">
    Load Content
</button>
<script>
    function loadContent() {
        $.ajax({
            url: '/dynamic',
            type: 'GET',
            success: function (response) {
                $("#content").html(response)
            }
        })
    }
</script>

动态模板dynamic.html #

My dynamic content
<script>
    let test = 1;
</script>

问题原因 #

jQuery 3.7调整了.html()方法执行动态脚本的逻辑：插入的<script>代码会直接在全局作用域执行。而let声明的变量存在块级作用域限制，同一作用域内不允许重复声明——第一次加载时test已在全局作用域完成声明，第二次加载同一脚本时自然触发错误。

旧版本jQuery可能通过将脚本包裹在函数作用域内执行，间接规避了全局作用域的变量冲突，因此此前未出现该问题。

解决方案 #

1. 为动态脚本添加块级作用域 #

用{}包裹脚本代码，每次执行都会创建独立的块级作用域，避免变量污染全局：

My dynamic content
<script>
{
    let test = 1;
    // 其他业务代码
}
</script>

2. 使用立即执行函数表达式(IIFE) #

通过IIFE创建独立的函数作用域，隔离变量与全局作用域：

My dynamic content
<script>
(function() {
    let test = 1;
    // 其他业务代码
})();
</script>

3. 改用局部作用域变量（可选） #

确保所有动态脚本中的变量都在局部作用域内声明，避免暴露到全局环境，从根源上杜绝重复声明冲突。

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