如何在jQuery中获取按钮的动态ID？代码无法运行求助

我写了下面这段HTML代码：

<ul class="dropdown-menu"> 
<li><button type="button" id="1" class="highlight"> Edit </button> </li>
<li><button type="button" id="2" class="highlight"> Edit </button> </li>
<li><button type="button" id="3" class="highlight"> Edit </button> </li>
<li><button type="button" id="4" class="highlight"> Edit </button> </li>
...............................

<li><button type="button" id="100" class="highlight"> Edit </button> </li>
</ul>

我想用jQuery获取点击按钮的ID，但这段代码没法正常工作：

$('.highlight').on('click', function(e){
     var id = $(this).attr('id');
     alert(id); 
});

补充说明：我加了个代码片段证明代码本身是没问题的：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="dropdown-menu">
  <li><button type="button" id="1" class="highlight"> Edit </button> </li>
  <li><button type="button" id="2" class="highlight"> Edit </button> </li>
  <li><button type="button" id="3" class="highlight"> Edit </button> </li>
  <li><button type="button" id="4" class="highlight"> Edit </button> </li>
  <li><button type="button" id="100" class="highlight"> Edit </button> </li>
</ul>

$('.highlight').on('click', function(e) {
  var id = $(this).attr('id');
  console.log(id);
});

问题根源在于事件绑定时机：如果这些按钮是通过JS动态生成（比如循环渲染、异步加载后添加到DOM）的，你直接给.highlight绑定点击事件时，这些元素还没被创建，事件自然绑定不上。而静态代码片段能正常工作，是因为DOM加载完成后元素已经存在，事件能直接绑定。

解决这个问题的核心是使用事件委托：把点击事件绑定到一个已经存在的父级元素（比如.dropdown-menu）上，让父元素监听子元素的点击事件，这样不管子元素是一开始就有还是后来动态添加的，都能触发事件。

修改后的代码如下：

// 绑定到父级静态元素 .dropdown-menu
$('.dropdown-menu').on('click', '.highlight', function(e){
    var id = $(this).attr('id');
    alert(id);
});

或者用更高效的原生JS方式获取ID：

$('.dropdown-menu').on('click', '.highlight', function(e){
    alert(this.id);
});

这样修改后，不管按钮是静态存在还是动态生成的，点击时都能正确获取到对应的ID了。

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