Select a html element that will be created after ajax job

Question

I'm tying to add custom right click context menu with jQuery on (.message) element what will be available after foreach loop.

In my index html file i have div by id (show_case) chat.php

 foreach ($messages as $key => $value) { ?>
            <div class="message">
                <p class="username"><?php echo $value['username']; ?></p> <span>say:</span>
                <p class="text"> <?php echo $value['message']; ?></p>
            </div> <?php }
    }

chat.js used jQuery/ajax

chat.fetchMessages = function () {

    var data = {method: "fetch"}
    $.ajax({
        url: 'ajax/chat.php',
        type: 'POST',
        data: data,
        success: function (data) {
            $('#show_case').html(data);
        }

    });
}

Now I want to select div with class message in foreach loop to handle my context menu options menu.js

$('document').ready(function()
{
    $(".message").on("contextmenu", function (e) {

        e.preventDefault();
        var menu = $(".menu");
        menu.hide();
        //let get xposiion;
        var xpos = e.pageX;
        var ypos = e.pageY;

        menu.css({
            top: ypos,
            left: xpos
        });
                menu.show(200);

I can't select it but it doesn't work. What should I do?