JS编程触发按钮点击时获取data属性返回NULL的问题

核心原因是违反了HTML的基础规范：同一个DOM文档中id属性必须全局唯一。
你当前页面里同时存在两个id为send的按钮：一个放在模态框内，一个放在主页面，属于典型的重复id问题。jQuery的$("#send")选择器底层调用原生document.getElementById()方法，遇到重复id时只会返回DOM树中第一个匹配到的元素，根本无法保证选中你预期的主页面提交按钮，这就导致了取值异常：

• 直接点击主页面按钮时，如果模态框还没被渲染插入DOM，或者模态框内的同id按钮在DOM树中的位置排在主页面按钮之后，选择器刚好能命中主页面的提交按钮，因此可以正常读取到data属性值。
• 点击模态框按钮间接触发主页面事件时，模态框已经完整渲染到DOM结构里，此时选择器实际命中的是模态框内的按钮，而你要读取的data-btn-action属性是绑定在主页面提交按钮上的，自然会读到NULL值。

按以下优先级调整即可彻底解决问题：

• 从根源消除id冲突：给两个按钮分别设置全局唯一的id，比如模态框内的按钮设为id="modalSendBtn"，主页面的提交按钮设为id="mainSendBtn"，从基础规范层面避免选择器匹配冲突。
• 调整属性读取逻辑：在主页面提交按钮的点击事件回调中，不要再通过id选择器查找当前元素，直接用$(this)指代正在触发事件的按钮对象，把属性读取代码修改为：

let actionBtn = $(this).attr('data-btn-action');

这种写法完全不受页面其他同名id元素的干扰，无论事件是直接点击触发还是通过其他代码间接触发，都能准确读取到当前按钮的属性值。

• 优化事件触发逻辑：不要靠运行时查id的方式触发主页面按钮点击，可以在页面初始化阶段就缓存主页面按钮的引用，避免选择器匹配错误，示例代码：

// 页面DOM加载完成后缓存主页面提交按钮
const mainSubmitBtn = $('#mainSendBtn');

// 给模态框按钮绑定点击事件，直接触发缓存的主按钮点击
$('#modalSendBtn').on('click', function() {
  mainSubmitBtn.trigger('click');
})

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