如何使用jQuery为多个band-comments类<a>标签绑定点击事件？

嘿，我来帮你搞定这个问题！你要给那些重复出现的.band-comments链接绑定点击事件，其实分两种场景处理就很稳妥，看你的链接是页面加载时就存在的，还是后续动态添加到页面的：

场景一：页面初始化时已存在的链接 #

如果这些带.band-comments类的a标签是页面加载完成后就已经在DOM里的，直接选择这个类绑定点击事件就可以了：

// 等待DOM完全加载后再执行代码
$(document).ready(function() {
  // 选中所有带band-comments类的a标签，绑定点击事件
  $('.band-comments').on('click', function(e) {
    // 如果你需要自定义逻辑，先阻止默认的跳转行为
    e.preventDefault();
    
    // 获取当前点击链接的href属性值
    const linkUrl = $(this).attr('href');
    console.log('点击的链接地址：', linkUrl);
    
    // 要是之后还是需要跳转页面，可以手动触发
    // window.location.href = linkUrl;
  });
});

这种方式简单直接，jQuery会一次性找到所有匹配的元素并给它们绑定事件。

场景二：动态添加的链接（事件委托） #

如果这些a标签是后续通过JavaScript动态生成并添加到页面的（比如通过AJAX加载、用户操作后生成），上面的方法就失效了——因为绑定事件的时候新元素还不存在。这时候用事件委托就完美解决：

$(document).ready(function() {
  // 把事件绑定到一个稳定的父容器上（这里用你提供的带data-videos-list="listelement"的div）
  $('div[data-videos-list="listelement"]').on('click', '.band-comments', function(e) {
    e.preventDefault();
    
    const linkUrl = $(this).attr('href');
    console.log('动态生成的链接地址：', linkUrl);
    
    // 如需跳转，执行以下代码
    // window.location.href = linkUrl;
  });
});

事件委托的原理 #

事件会沿着DOM树向上冒泡，父容器捕获到事件后，会判断触发事件的元素是不是.band-comments，如果是就执行对应的处理逻辑。这样不管之后新增多少个.band-comments链接，都会自动触发这个点击事件，不用重新绑定。

额外小提示 #

• 如果你不需要自定义逻辑，只是想在跳转前做点额外操作，可以去掉e.preventDefault()，点击后会正常跳转到href指定的页面。
• 要是需要从href里提取bandName参数，可以用这段代码：

  const bandName = $(this).attr('href').split('bandName=')[1];
  console.log('当前乐队名称：', bandName);
  

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