jQuery ile eklenen elemente eylem ekleme

Bu daha basit bir anlatım oldu sanırım.
Html yapım bu şekilde ise ekranda alert oluşmuyor.

<!-- index.html -->
<div id="yazbuna"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="main.js"></script>
<script>
    $('.click-me').on('click', function() {
        alert();
    })
</script>

// main.js 
$('#yazbuna').prepend('<button class="click-me">Tıkla Beni</button>');

Ama böyle bir yapıya sahip ise ekranda alert oluşabiliyor.

<!-- index.html -->
<div id="yazbuna"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="main.js"></script>

// main.js
$('#yazbuna').prepend(`
    <button class="click-me">Tıkla Beni</button>
    <script>
        $('.click-me').on('click', function() {
            alert();
        });
    </script>
`);