在动态创建的元素上单击时未按预期工作jQuery

<ul id="myList">
  <li>Item 1</li>
</ul>
<button id="addItem">Add Item</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  $('#addItem').click(function() {
    $('#myList').append('<li>New Item</li>');
  });

  // 这里的事件处理程序不会作用于动态添加的元素
  $('#myList li').click(function() {
    alert('Item clicked!');
  });
});
</script>

<ul id="myList">
  <li>Item 1</li>
</ul>
<button id="addItem">Add Item</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  $('#addItem').click(function() {
    $('#myList').append('<li>New Item</li>');
  });

  // 使用事件委托来处理动态添加的元素
  $('#myList').on('click', 'li', function() {
    alert('Item clicked!');
  });
});
</script>