如何自动为所有.tmb元素（含动态生成）添加对应跳转的onclick事件？

现有代码 #

JavaScript 代码 #

(function($) {
  $(".tmb:first-child").attr("onclick", "location.href='location-one.html'");
})(jQuery);

HTML 代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tmb">
  <p>First element</p>
  <a href="location-one.html">Click me</a>
</div>
<div class="tmb">
  <p>Second element</p>
  <a href="location-two.html">Click me</a>
</div>
<div class="tmb">
  <p>Third element</p>
  <a href="location-three.html">Click me</a>
</div>

问题 #

当前我可通过重复编写代码并修改:nth-child序号与URL，为每个.tmb元素添加跳转的onclick事件，但未来会动态生成更多.tmb元素，请问是否有自动化实现该功能的方法？

自动化实现方案 #

不用逐个编写绑定代码，通过事件委托和复用已有URL就能实现自动化处理，不管后续新增多少动态元素都能生效：

最终代码 #

(function($) {
  // 用事件委托绑定到document（也可替换为.tmb的直接父容器，性能更优）
  $(document).on('click', '.tmb', function() {
    // 提取当前.tmb内部a标签的跳转地址
    const targetUrl = $(this).find('a').attr('href');
    // 验证地址存在后跳转
    if (targetUrl) {
      location.href = targetUrl;
    }
  });
})(jQuery);

核心优势 #

• 一劳永逸：一次绑定后，所有现有和未来动态生成的.tmb元素都会自动拥有点击跳转功能，无需重复修改代码。
• 减少冗余：直接复用每个.tmb内部已有的<a>标签URL，不用手动维护多份地址，避免输入错误。
• 性能更优：事件委托相比逐个元素绑定，能减少事件监听数量，尤其适合元素较多的场景。

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