如何用jQuery的starts with选择器匹配带动态ID的href触发模态框？

API 探路者

2026-5-20

针对动态ID模态框的jQuery触发方案

没问题，我来帮你搞定这个动态ID的模态框触发问题！

你要实现的是点击所有href属性以#edit-my-modal_开头的元素时，触发对应的模态框功能，用jQuery的属性前缀选择器就能轻松实现，具体步骤如下：

1. 基础实现（静态元素）

如果你的触发按钮是页面加载时就存在的，直接用前缀选择器绑定点击事件即可：

// 匹配所有href以#edit-my-modal_开头的元素
$('[href^="#edit-my-modal_"]').on('click', function(e) {
  // 阻止默认的锚点跳转行为，避免页面滚动
  e.preventDefault();
  
  // 获取当前按钮对应的模态框ID（就是href的值）
  const targetModal = $(this).attr('href');
  
  // 执行你的模态框逻辑，比如显示模态框（这里以Bootstrap模态框为例）
  $(targetModal).modal('show');
  
  // 如果是自定义模态框，替换成你原来的显示逻辑即可，比如：
  // $(targetModal).fadeIn();
});

2. 动态元素适配（事件委托）

如果你的触发按钮是通过AJAX、动态渲染等方式后来添加到页面的，上面的绑定方式会失效，这时候要用事件委托：

// 把事件绑定到父容器（或者document），监听子元素的点击
$(document).on('click', '[href^="#edit-my-modal_"]', function(e) {
  e.preventDefault();
  const targetModal = $(this).attr('href');
  $(targetModal).modal('show');
});

这样不管按钮什么时候被添加到页面，都能触发点击事件。