如何获取jQuery中动态创建的Anchor元素的href属性？

别急，这个问题我碰到过好多次了——动态生成的元素直接绑定click事件根本行不通，因为页面初始化时这些元素还不存在，事件压根没绑定到它们身上。咱们用事件委托就能轻松搞定！

为什么之前的方法失效？ #

当你在页面加载完成后用$('a').click(...)绑定事件时，jQuery只会把事件绑定到当时已经存在于DOM中的a标签上。后来通过循环动态创建的新a标签，完全没被包含在这个绑定范围内，所以点击时自然拿不到href属性。

正确解决方案：事件委托 #

核心思路是把事件绑定到一个已经存在的父元素上（比如页面一开始就有的容器，甚至document），然后指定要监听的子元素选择器。这样不管子元素什么时候被创建，点击事件都会冒泡到父元素，触发我们的处理函数。

代码示例 #

假设你是这样动态创建a标签的：

// 循环创建动态链接
for (let i = 0; i < 5; i++) {
  const newLink = $('<a>', {
    href: `/article-${i}.html`,
    class: 'dynamic-link',
    text: `文章链接 ${i+1}`
  });
  // 把新链接添加到页面上的容器里
  $('#link-container').append(newLink);
}

那正确的事件监听写法应该是：

// 绑定事件到已存在的父容器#link-container
$('#link-container').on('click', 'a.dynamic-link', function(e) {
  // 阻止链接默认跳转（如果只是想获取地址，不需要跳转的话）
  e.preventDefault();
  
  // 方式1：用jQuery的attr()获取href属性值（和你设置的一致，比如相对路径）
  const relativeHref = $(this).attr('href');
  console.log('相对路径链接：', relativeHref);
  
  // 方式2：用原生DOM属性获取完整URL（浏览器解析后的绝对路径）
  const absoluteHref = this.href;
  console.log('完整URL地址：', absoluteHref);
});

注意事项 #

• 尽量选择最接近动态元素的父容器来绑定事件，而不是直接用document，这样能减少事件冒泡的性能开销。
• $(this)在处理函数里指向被点击的那个a标签，直接用它就能获取到目标元素的所有属性。
• 如果需要让链接正常跳转，去掉e.preventDefault()即可。

常见错误写法（避坑） #

千万别再这么写了，对动态元素完全无效：

// ❌ 错误：直接绑定到动态元素，页面初始化时这些元素还不存在，事件绑定失败
$('a.dynamic-link').click(function() {
  const href = $(this).attr('href'); // 这里根本拿不到值！
});

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