Because when I use AJAX the function doesn’t work?

Question

JS

    $(document).ready(function(){
        LoadMods();

        $(".mod").click(function(){
            var id = $(this).data("id");

            alert("Entrou");

            $.ajax({
                url: '../crud/load_mods_info.php?id='+id,
                type: 'post',
                dataType: 'json',
                cache: false,
                success: function(data){

                }        
            }); 
        });
    });

function LoadMods(){
    $.ajax({
        url: '../crud/load_mods.php',
        type: 'post',
        dataType: 'json',
        success: function(data){
            var html = "";

            for (var i = 0; i < data.length; i++) {
                html += "<li><a href='#' class='mod' data-id='"+data[i].id+"'>"+data[i].nome+"</a></li>";
            }

            $('#myUL').html(html);
        }
    });
}

HTML

<ul id="myUL" class="mt-3"></ul>
<a href="#" class="mod" data-id="10">Teste</a>

What’s going on is: When the Loadmods function creates the li tag inside ul and I click on the link, it does not run jquery $(".mod"). click()...

However, if I click Test, which I created, it works normally, ie, give the Alert("Entered"). Since the code is the same: <a href="#" class="mod" data-id="10">Teste</a>

I don’t know if I was too clear, I hope so!