jQuery动态获取新增列表元素ID的功能实现问题

嘿，我懂你的需求啦——点击新添加的列表项时要获取它的ID，但现在新添加的项点击后没反应对吧？这是因为你原来的事件绑定方式只对页面加载时已存在的<li>生效，动态生成的元素没被绑定事件。

问题原因 #

你原来的代码里，$('ul>li').on('click', ...)是在页面初始化时，给当时已经存在的<li>元素绑定点击事件。但后来通过prepend添加的新<li>，并没有被绑定这个事件，所以点击它们不会触发alert。

解决方案：使用事件委托 #

我们可以把事件绑定到父元素（这里是<ul>）上，让父元素监听子元素的点击事件。jQuery的.on()方法支持这种事件委托写法，这样不管是初始的还是动态添加的<li>，点击都会触发事件。

修改后的完整代码如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li id="name-1">初始项1</li>
  <li id="name-2">初始项2</li>
</ul>
<button id="add">添加新项</button>

<script>
$(document).ready(function() {
  // 用事件委托绑定点击事件，监听ul下所有li的点击（包括动态添加的）
  $('ul').on('click', 'li', function() {
    var idName = $(this).attr('id');
    alert(idName);
  });

  $('#add').click(function() {
    var n = Math.floor((Math.random() * 100) + 1);
    $('ul').prepend('<li id="name-' + n + '">New Item</li>');
  });
});
</script>

关键说明 #

• 事件委托的写法是$(父元素).on('事件名', '子元素选择器', 回调函数)
• 这里把点击事件绑定到<ul>上，当点击它下面的<li>时，事件会冒泡到<ul>，然后触发我们的回调函数，这样动态添加的<li>也能被监听。

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