為什麼動態產生的物件無法觸發 JQuery click 事件!?

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> 
<span id="static" class="test">靜態</span>
</br>
</br>
<div id="div"></div>

<script>
$('.test').on('click', function () {
	var clickID = $(this).attr('id');
    alert('點擊的元素ID是：' + clickID);
})

var d = $('#div');
var span = document.createElement('span');
span.id = 'dynamic';
span.className = 'test';
span.textContent = '動態';

d.append(span);
</script>

var span = document.createElement('span');
span.id = 'dynamic';
span.className = 'test';
span.textContent = '動態';
span.onclick = function () {
    console.log('動態 <span> 元素被點擊了');
};