如何为指定Class的按钮绑定点击事件以触发弹窗？

问题根源 #

你用getElementsByClassName('send:after')无效的核心原因：send:after是CSS伪元素，它不属于真实DOM节点，JavaScript无法直接获取或给伪元素绑定事件。按钮的真实类名是send，这才是你应该用来定位元素的标识。

正确实现方式 #

1. 原生JavaScript基础写法 #

先定位按钮元素，再绑定点击事件：

// 获取按钮（getElementsByClassName返回类数组，取第一个匹配项）
const sendBtn = document.getElementsByClassName('send')[0];
// 绑定点击触发弹窗
sendBtn.addEventListener('click', function() {
  // 替换成你的弹窗逻辑，示例用alert演示
  alert('弹窗已触发！');
});

2. 更精准的选择器（推荐，避免类名冲突） #

如果页面存在多个带send类的元素，可结合其他类名缩小定位范围：

const sendBtn = document.querySelector('.send.mat-icon-button');
sendBtn.addEventListener('click', () => {
  // 弹窗逻辑
  alert('弹窗已触发！');
});

3. Angular环境下的规范处理 #

从按钮的_ngcontent-c15属性能看出这是Angular组件，直接用原生JS绑定可能因组件生命周期、视图封装失效，更规范的做法是在组件内处理：

• 模板中给按钮添加点击事件：

<button class="send mat-icon-button" (click)="triggerPopup()">
  <mat-icon>cloud_upload</mat-icon>
</button>

• 组件TS文件中定义弹窗方法：

triggerPopup() {
  // 这里可调用Angular Material的MatDialog或自定义弹窗逻辑
  alert('弹窗已触发！');
}

额外提醒 #

如果按钮当前带有disabled属性，默认不会触发点击事件。若需要在禁用状态下也触发，可移除disabled属性，或使用事件委托绑定到父元素：

// 事件委托写法，兼容按钮动态生成的场景
document.body.addEventListener('click', function(e) {
  if(e.target.closest('.send')) {
    alert('弹窗已触发！');
  }
});

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