jQuery中attr()方法在Chrome浏览器不生效的解决方案

DevOps 小满

2026-9-3

问题根因

Chrome和Firefox对HTML属性与DOM内置属性的同步逻辑存在差异：jQuery的*attr()*方法底层调用原生setAttribute/getAttribute操作标签上的静态HTML属性，而对于input、select这类表单控件（你的代码中#unit大概率是表单元素），Chrome在页面初始解析后会缓存控件的name属性值，用于表单提交、form.elements索引等逻辑，单纯修改HTML属性不会同步更新DOM实例上的name属性值，最终表现为属性修改不生效。Firefox对HTML属性和DOM属性做了双向同步，因此不会出现该问题。

可行解决方案

按优先级从高到低尝试：

替换*attr()为prop()方法
对于表单元素的name、checked、selected、disabled这类内置DOM属性，优先使用jQuery的prop()*方法操作，该方法直接修改DOM实例上的属性值，跨浏览器一致性更好。修改后代码如下：
```
$(document).ready(function () {
    $("#busd").click(function () {
        $("#unit").prop('name','busdUnit')
    })
    $("#bnb").click(function () {
        $("#unit").prop('name','bnbUnit')
    })
})
```
验证方式：修改逻辑运行后，在Chrome控制台分别执行$('#unit').attr('name')和$('#unit').prop('name')，如果前者返回修改后的值、后者返回旧值，即可确认是属性不同步问题，替换为*prop()*即可直接修复。
排查页面ID重复问题
在Chrome控制台执行$('#unit').length，如果返回值大于1，说明页面存在多个id为unit的元素，jQuery默认只会修改匹配集合中第一个元素的属性，你实际要操作的目标元素未被选中。这种情况为目标元素设置唯一ID即可。
排查动态渲染元素的事件绑定问题
如果#busd、#bnb或者#unit是页面初始加载后通过AJAX、前端模板动态插入的元素，直接使用.click()绑定事件不会对后续插入的元素生效，需要换成事件委托写法：
```
$(document).ready(function () {
    $(document).on('click', "#busd", function () {
        $("#unit").prop('name','busdUnit')
    })
    $(document).on('click', "#bnb", function () {
        $("#unit").prop('name','bnbUnit')
    })
})
```
排查事件冲突
在Chrome控制台选中#busd元素，执行getEventListeners($0)查看绑定的所有点击事件，确认是否存在其他逻辑在你的属性修改代码执行后，又把name属性改回了原值，或者存在事件冒泡、默认行为拦截的情况，可根据业务需求添加event.stopPropagation()阻断冒泡测试。

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